Question

我已经构建了一个流程图来显示几个单词的月度值。我简化了这个例子，只显示一个单词。我看到的其他流图都或多或少地集中在显示与同一基线的偏差。随着图表的进展，我的基线向负方向漂移。我做错了什么？

                // Now let's make the streamgraph

        console.log('starting to make a stack');    
        var stack = d3.stack()
            .keys(terms)
            .order(d3.stackOrderNone)
            .offset(d3.stackOffsetWiggle);

        var series = stack(streamFreq);

        var x = d3.scaleTime()     //var x = d3.scaleLinear()
          .domain(d3.extent(streamFreq, function(d) {
            return d.date;
          }))
          .range([0, width]);

        var xAxis = d3.axisBottom(x);

        var y = d3.scaleLinear()
          .domain([0, d3.max(series, function(layer) {
            return d3.max(layer, function(d) {
              return d[0] + d[1];
            });
          })])
          .range([height/2, 0]);




        var z = d3.interpolateCool;

        var area = d3.area()
          .x(function(d) {
            //console.info('in area function', d);
            return x(d.data.date);
          })
          .y0(function(d) {
            console.log('d[0]: ' + d[0] + ", " + d.data.mad+ ", " + d.data.idiot+ ", " + d.data.angry);
            return y(d[0]);
          })
          .y1(function(d) {
            console.log('   d[1]: '+ d[1]);
            return y(d[1]);
          })
          .curve(d3.curveBasis);


        g.selectAll("path")
          .data(series)
          .enter().append("path")
          .attr("d", area)
          .style("fill", function(d, i) {
            return z(i/20.0);
          });

        var toolTip = svg.selectAll("path")
            .append("svg:title")
            .text(function(d,i) { 
              return terms[i];
            });

        g.append("g")
          .call(xAxis);

        g.append("text")
          .attr("transform", "translate(" + -50 + "," + (height + margin.bottom / 2) + ")")
          .attr("font-size", 15)
          .attr("font-family", "sans-serif")
          .text("Angry emails");

        //z.domain(terms);
        var legend = g.append("g")
          .attr("transform", "translate(-75, 30)")
          .attr("font-family", "sans-serif")
          .attr("font-size", 10)
          .attr("text-anchor", "end")
          .selectAll("g")
          .data(terms.slice().reverse())
          .enter().append("g")
          .attr("transform", function(d, i) {
            return "translate(0,"  + i * 20 + ")";
          });

        legend.append("rect")
          .attr("x", width - 75)
          .attr("width", 19)
          .attr("height", 19)
          .attr("fill", function(d, i) {
            return z(i/20.0);});

        legend.append("text")
          .attr("x", width - 31)
          .attr("y", 9.5)
          .attr("dy", "0.32em")
          .text(function(d) {
            return d;
          });



  }

数据和d [0]和[d1]如下所示（源自console.log）第一个数字是d [0]，第二个是原始数据：开始堆叠

d[0]: 0,   10
    d[1]: 10
d[0]: 0,   0
    d[1]: 0
d[0]: 0,   0
    d[1]: 0
d[0]: 0,   0
    d[1]: 0
d[0]: 0,   0
    d[1]: 0
d[0]: 0,   0
    d[1]: 0
d[0]: 0,   0
    d[1]: 0
d[0]: 0,   0
    d[1]: 0
d[0]: 0,   0
    d[1]: 0
d[0]: 0,   0
    d[1]: 0
d[0]: 0,   0
    d[1]: 0
d[0]: -3,   6
    d[1]: 3
d[0]: -3,   0
    d[1]: -3
d[0]: -3,   0
    d[1]: -3
d[0]: -3,   0
    d[1]: -3
d[0]: -3,   0
    d[1]: -3
d[0]: -3,   0
    d[1]: -3
d[0]: -3,   0
    d[1]: -3
d[0]: -4.5,   3
    d[1]: -1.5
d[0]: -3.5,   1
    d[1]: -2.5
d[0]: -3.5,   0
    d[1]: -3.5
d[0]: -3.5,   0
    d[1]: -3.5
d[0]: -8,   9
    d[1]: 1

基线漂移的直接原因turns out to be：

d3.stackOffsetWiggle（series，order）移动基线以便最小化层的加权摆动。建议使用此偏移量流程图与内向外的顺序一起使用。见Stacked 图形 - 几何＆amp;布莱恩和美国的美学Wattenberg更多信息。

使用此功能可使其保持基线状态。 .offset（d3.stackOffsetSilhouette）我仍然不知道为什么这个设置会导致我的数据出现问题，而不是示例。这是摆动的预期行为吗？

d3.js流图漂移到更负面

0 个答案: