D3.js 流图转换不绘制任何内容答案

【问题标题】：D3.js streamgraph transition plots nothingD3.js 流图转换不绘制任何内容
【发布时间】：2023-03-30 23:00:02
【问题描述】：

这里是另一个 D3.js 菜鸟。

我开始编辑来自http://bl.ocks.org/mbostock/4060954 的股票流图示例。

我查看了几个类似的问题，例如this、this 和this，但我似乎找不到我的错误。

我有两个 json 模拟数据，layers0 和 layers1（源自上述示例之一，处理自 this fiddle）。通过更改我的数据，我可以毫无问题地绘制这两个：

svg.selectAll("path")
    .data(layers0/1)  #layers0 or layers1, both work
.enter().append("path")
    .attr("d", function(d) { return area(d.values); })
    .style("fill", function() { return color(Math.random()); });

但是，当我尝试在这两个图之间创建过渡时，原始图消失了，我只剩下一个空白空间：

function transition() {
d3.selectAll("path")
    .data(layers1/0)  #the alternate (or same) one from the function above
    .transition()
    .duration(500)
    .attr("d", area);
}

最终我想要很多按钮，transition 应该在它们之间移动，例如在this example 中，但现在我只想在两个数据集之间移动。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

好吧，我找到了一个可行的解决方案，尽管我还没有完全理解它。该解决方案主要是从this fiddle 复制的。我将指出示例代码和必须制作的这段代码之间的差异（如果有人可以解释为什么，那就太好了）它才能工作。

我会将我的整个代码发布给任何觉得 D3 令人困惑的新手。

HTML：（我正在处理一个金字塔应用程序，因此脚本在头部导入）

<head>
<title>           
    Graph
</title>

    <link rel="stylesheet" type="text/css" href="${request.static_url('monitor:static/css/graph.css')}"/>

    <script type="text/javascript" src="${request.static_url('monitor:static/jquery-ui-1.10.3/jquery-1.9.1.js')}"></script>
    <script type="text/javascript" src="${request.static_url('monitor:static/jquery-ui-1.10.3/ui/jquery-ui.js')}"></script>
    <script type="text/javascript" src="${request.static_url('monitor:static/D3/d3.min.js')}"></script>
    <script type="text/javascript" src="${request.static_url('monitor:static/js/graph.js')}"></script>
</head>

<body>
    <body onload="graphplot()">
    <h4 id="Heading">Streamgraph</h4>
    <div id="graph_area"></div>
</body>

然后这是我的 graph.js：

function graphplot(){


test_data0 = [{"0": 0.2, "1": 0.0, "-1": 0.0}, {"0": 0.0, "1": 0.6, "-1": 0.0}, {"0": 0.0, "1": 0.3, "-1": 0.0}, {"0": 0.0, "1": 0.0, "-1": 0.6}, {"0": 0.3, "1": 0.0, "-1": 0.1}, {"0": 0.0, "1": 0.2, "-1": 0.3}, {"0": 0.3, "1": 0.5, "-1": 0.0}, {"0": 0.3, "1": 0.0, "-1": 0.0}, {"0": 0.0, "1": 0.0, "-1": 0.0}]
test_data1 = [{"0": 0.0, "1": 0.0, "-1": 0.0}, {"0": 0.0, "1": 0.6, "-1": 0.0}, {"0": 0.0, "1": 0.3, "-1": 0.0}, {"0": 0.0, "1": 0.0, "-1": 0.6}, {"0": 0.3, "1": 0.3, "-1": 0.0}, {"0": 0.0, "1": 0.3, "-1": 0.3}, {"0": 0.3, "1": 0.1, "-1": 0.6}, {"0": 0.3, "1": 0.0, "-1": 0.0}, {"0": 0.0, "1": 0.0, "-1": 0.0}]


    var width = $("#graph_area").width(),
        height = 500;


    var toggle = 0;  //just so that the animation toggles between these two data

    $("#graph_area").click(function(){
        console.log('test')

        if (toggle == 0){
            streamed_history(test_data1)
            toggle = 1;
        }else {
            streamed_history(test_data0)
            toggle=0;
        }
    });


    var colors = {'0': '#6ff500', '1': '#ffad0a', '-1': '#f90035'}, //colours for the three layers; no longer random
        feedbacks = [-1, 0, 1],
        stack = d3.layout.stack().offset("wiggle"); //the plot sits on its base without wiggle
        //.values(function(d) { return d.values; }); --->removed. Throws: TypeError: t is undefined

    var svg = d3.select("#graph_area").append("svg")
        .attr("width", width)
        .attr("height", height);



    streamed_history(test_data0)

    function streamed_history(data) {
        data_array = feedbacks.map(function (f) {
            return data.map(function(element, i) { return {x: i, y: element[f]}; })
        }),
        layers = stack(data_array)  //--->No nest.entries.  And the below code for only one layers variable
        layers = feedbacks.map(function (f, i) {
            return {layer: layers[i], feedback: f, color: colors[f]}
        })



        var x = d3.scale.linear()
            .domain([0, data.length - 1])
            .range([0, width]);

        var y = d3.scale.linear()
            .domain([0,1])  //--->coplicated thing removed.  It just needs to be:([0, max of data])
            .range([height, 0]);

        var area = d3.svg.area().interpolate("basis")
            .x(function(d) { return x(d.x); })
            .y0(function(d) { return y(d.y0); })
            .y1(function(d) { return y(d.y0 + d.y); });

        //enter
        svg.selectAll("path")
            .data(layers)
        .enter().append("path")
            .attr("d", function (d) {return area(d.layer);})
            .style("fill", function(d) { return d.color; });

        //update
        d3.selectAll("path") //this effectively replaces transition(), since now each dataset is plotted independently with the duration of transition defined here.
        .data(layers)
        .transition()
        .duration(500)
        .attr("d", function (d) {return area(d.layer);});
    }

}//end graphplot

graphplot()

希望这对将来的任何人都有帮助！

【讨论】：

【解决方案2】：

我试图在这里重现您的要求：

http://jsfiddle.net/g9JNH/

<button class="button1" onclick="transition()">Transition 1</button>
<button class="button2" onclick="transition2()">Transition 2</button>
<script>
var n = 20, // number of layers
    m = 200, // number of samples per layer
    stack = d3.layout.stack().offset("wiggle"),
    layers0 = stack(d3.range(n).map(function() { return bumpLayer(m); })),
    layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); }));

    var width = 960,
    height = 500;

    var x = d3.scale.linear()
        .domain([0, m - 1])
        .range([0, width]);

    var y = d3.scale.linear()
       .domain([0, d3.max(layers0.concat(layers1), function(layer) { 
            return d3.max(layer, function(d) { return d.y0 + d.y; }); })])
       .range([height, 0]);

    var color = d3.scale.linear()
       .range(["#aad", "#556"]);

    var area = d3.svg.area()
       .x(function(d) { return x(d.x); })
       .y0(function(d) { return y(d.y0); })
       .y1(function(d) { return y(d.y0 + d.y); });

    var svg = d3.select("body").append("svg")
       .attr("width", width)
       .attr("height", height);

    svg.selectAll("path")
       .data(layers0)
       .enter().append("path")
       .attr("d", area)
       .style("fill", function() { return color(Math.random()); });

    function transition() {
       d3.selectAll("path")
           .data(layers1)
           .transition()
           .duration(2500)
           .attr("d", area);
    }

    function transition2() {
        d3.selectAll("path")
           .data(layers0)
           .transition()
           .duration(2500)
           .attr("d", area);
    }

    // Inspired by Lee Byron's test data generator.
    function bumpLayer(n) {

         function bump(a) {
             var x = 1 / (.1 + Math.random()),
             y = 2 * Math.random() - .5,
             z = 10 / (.1 + Math.random());
             for (var i = 0; i < n; i++) {
                 var w = (i / n - y) * z;
                 a[i] += x * Math.exp(-w * w);
             }
         }

         var a = [], i;
         for (i = 0; i < n; ++i) a[i] = 0;
         for (i = 0; i < 5; ++i) bump(a);
         return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
    }
    </script>

我使用了相同的示例，并且代码原则上有效，您是否已经实现了其他一些东西，例如更多的 html，或者数据集中的一些错误？或者我没听懂你的问题……

【讨论】：

啊，是的，我应该提到我的数据是json数据，从this fiddle复制而来。我已经设法使用自己工作的虚拟数据生成器获得完全相同的代码，当我尝试添加自己的数据时出现问题。