javascript - 如何正确计算 D3 Siluohette 堆积面积图的宽度

Question

希望迈克·博斯托克 (Mike Bostock) 能够在这件事上拯救我。

(编辑:在安德里亚·克劳福德(Andrea Crawford)的回答的帮助下，这是工作版本)JS fiddle :https://jsfiddle.net/dfcarter/kd0dkrL8/

我在 d3 中编写了一个图表，以允许用户动态更改(颜色、所选数据等)

嗯，它主要起作用，但是当您删除较低的序数时，它会停止以图表为中心并开始向下蠕动。

看起来不错 - 删除前 3 个看起来不错

看起来 Not Acceptable - 删除最后 3 个并且图表位于图表区域的底部

D3核心引用:

( fiddle 工作正常，我不明白为什么频谱的外部引用不起作用，所以看看 fiddle )

var $pop = $('#my_custom_menu'),
  notHov = 1; // Hover flag

$pop.hover(function() {
  notHov ^= 1;
}); // Toggle flag on hover

$(document).on('mouseup keyup', function(e) {
  if (notHov || e.which == 27) $pop.fadeOut();
});

/////// CALL POPUP
$('.my_custom_menu').click(function() {
  $pop.stop().fadeIn();
});


function updateStream(color) {
  var label1 = d3.selectAll(".layer")
    .filter(function(d, i) {
      return i === clickIndex;
    })
    .style("fill", color);
}
$("#showPalette").spectrum({
  showPalette: true,
  palette: [
    ['black', 'white', 'blanchedalmond'],
    ['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
  ],
  change: updateStream
});

var clickIndex = 0;
$("#textDisplayName").keyup(function(event) {
  if (event.keyCode == 13) {
    //alert(eval($("#stream").val) + " , " + eval($("#textDisplayname").val));
    var newValue = document.getElementById("textDisplayName").value;

    var label1 = d3.selectAll("text")
      .filter(function(d, i) {
        return i === clickIndex;
      })
      .text(newValue);

  }
});

chart("data.csv", "blue");

var datearray = [];
var colorrange = [];

function csv(url, callback) {
  d3.text(url, function(text) {
    callback(text && d3.csv.parse(text));
  });
}

function drawgrid() {

}


function chart(csvpath, color) {

  if (color == "blue") {
    colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
  } else if (color == "pink") {
    colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
  } else if (color == "orange") {
    colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
  }
  strokecolor = colorrange[0];

  var format = d3.time.format("%m/%d/%y");

  var margin = {
    top: 20,
    right: 40,
    bottom: 30,
    left: 30
  };
  var width = document.body.clientWidth - margin.left - margin.right - 200;
  var height = 400 - margin.top - margin.bottom;

  var tooltip = d3.select("body")
    .append("div")
    .attr("class", "remove")
    .style("position", "absolute")
    .style("z-index", "20")
    .style("visibility", "hidden")
    .style("top", "30px")
    .style("left", "55px");

  var x = d3.time.scale()
    .range([0, width]);

  var y = d3.scale.linear()
    .range([height - 10, 0]);

  var getColor = d3.scale.ordinal()
    .range(colorrange);

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.weeks);

  var yAxis = d3.svg.axis()
    .scale(y);

  var yAxisr = d3.svg.axis()
    .scale(y);

  var stack = d3.layout.stack()
    .offset("silhouette")
    .values(function(d) {
      return d.values;
    })
    .x(function(d) {
      return d.date;
    })
    .y(function(d) {
      return d.value;
    });

  var nest = d3.nest()
    .key(function(d) {
      return d.key;
    });

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

  var svg = d3.select(".chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");





  function randomData() {
    return Math.random() * 9;
  }
  var dates = ["07/08/2016", "07/09/2016", "07/10/2016", "07/11/2016", "07/12/2016", "07/13/2016", "07/14/2016", "07/15/2016", "07/16/2016", "07/17/2016", "07/18/2016"];
  var numberOfSeries = 7,
    numberOfDataPoint = 7,
    data = [];
  for (var i = 0; i < numberOfSeries; ++i) {
    for (var j = 0; j < numberOfDataPoint; ++j) {
      data.push({
        key: i,
        value: randomData(),
        date: Date.parse(dates[j])

      });
    }
  }
  var layerData = nest.entries(data);
  var checkholder = d3.select("#checkboxHolder")
  var legend = checkholder.selectAll(".legend")
    .data(layerData)
    .enter().append("div")



  legend.append("input")
    .attr("type", "checkbox")
    .attr("id", function(d, i) {
      return "check" + i
    });


  legend.append("label")
    .attr("for", function(d, i) {
      return "check" + i
    })
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .html(function(d) {
      return d.key;
    });

  legend.on('change', function(d) {
    d.disabled = !d.disabled;

    d3.transition().duration(600).each(redraw);
  });

  var xaxisnode = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  var yaxisnode = svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + width + ", 0)")
    .call(yAxis.orient("right"));

  //svg.append("g")
  //    .attr("class", "y axis")
  //    .call(yAxis.orient("left"));
  function redraw() {
    var activeLayers = layerData.filter(function(d1) {
      return !d1.disabled;
    });
    var layers = stack(activeLayers);

    x.domain(d3.extent(data, function(d) {
      return d.date;
    }));
    y.domain([0, d3.max(data, function(d) {
      if (!d.disabled) return d.y0 + d.y;
    })]);
    svg.selectAll(".layergroup").remove();

    var layergroup = svg.selectAll(".layergroup")
      .data(layers)
      .enter().append("g")
      .attr("class", "layergroup");

    var paths = layergroup.append("path")
      .attr("class", "layer")
      .attr("d", function(d) {
        return area(d.values);
      })
      .style("fill", function(d, i) {
        return getColor(i);
      });

    layergroup.append("text")
      .datum(function(d) {
        return {
          name: d.key,
          value: d.values[d.values.length - 1]
        };
      })
      .attr("transform", function(d) {
        return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2) + ")";
      })
      .attr("x", -6)
      .attr("dy", ".35em")
      .attr("class", "pathLabel")
      .text(function(d) {
        return d.name;
      });

    //var clickIndex = 0;
    //paths.on("click", function (d, i) {
    //    clickIndex = i;
    //    svg.selectAll("text").filter(function (d, i) { return i === clickIndex }).attr("transform", function (d) { var coords = d3.mouse(svg.node()); return "translate(" + coords[0] + "," + coords[1] + ")"; })
    //});


    xaxisnode.call(xAxis);
    yaxisnode.call(yAxis.orient("right"));

    const drag = d3.behavior.drag()
      .origin(function(d) {
        return d;
      })
      .on("dragstart", dragstarted)
      .on("drag", dragged)
      .on("dragend", dragended)

    function dragstarted(d) {
      d3.event.sourceEvent.stopPropagation();
    }
    var dragIndex = 0;

    function dragged(d, i) {
      dragindex = i;
      const elem = svg.selectAll(".pathLabel").filter(function(d, i) {
        return i === dragindex;
      });
      elem.attr('transform', function(d) {
        var coords = d3.mouse(svg.node());
        return "translate(" + coords[0] + "," + coords[1] + ")";
      });
      //elem.attr('y', +elem.attr('y') + d3.event.dy)
    }

    function dragended(d) {}

    svg.selectAll(".layer")
      .attr("opacity", 1)
      .on("mouseover", function(d, i) {
        svg.selectAll(".layer").transition()
          .duration(250)
          .attr("opacity", function(d, j) {
            return j != i ? 0.6 : 1;
          })
      })

      .on("mousemove", function(d, i) {
        mousex = d3.mouse(this);
        mousex = mousex[0];
        var invertedx = x.invert(mousex);
        invertedx = invertedx.getMonth() + invertedx.getDate();
        var selected = (d.values);
        for (var k = 0; k < selected.length; k++) {
          datearray[k] = selected[k].date
          datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
        }

        mousedate = datearray.indexOf(invertedx);
        pro = d.values[mousedate].value;
        mouse = d3.mouse(d3.select("#letable").node());
        d3.select(this)
          .classed("hover", true)
          .attr("stroke", strokecolor)
          .attr("stroke-width", "0.5px"),
          tooltip.html("<p>" + d.key + "<br>" + pro + "</p>").style("visibility", "visible").style("left", (mouse[0] + 50) + "px").style("top", (mouse[1] + 30) + "px");

      })
      .on("mouseout", function(d, i) {
        svg.selectAll(".layer")
          .transition()
          .duration(250)
          .attr("opacity", "1");
        d3.select(this)
          .classed("hover", false)
          .attr("stroke-width", "0px"), tooltip.html("<p>" + d.key + "<br>" + pro + "</p>").style("visibility", "hidden");
      })
      .on("contextmenu", function(data, index) {
        var position = d3.mouse(this);
        d3.select('#my_custom_menu')
          .style('position', 'absolute')
          .style('left', position[0] + "px")
          .style('top', position[1] + "px")
          .style('display', 'block');
        d3.event.preventDefault();

        //d3.select('#stream')
        //    .attr("value", index);
        clickIndex = index;
        $('#textDisplayName')
          .val(data.key);


      }).call(drag);



    //d3.select('svg')
    //    .selectAll('text')
    //    .data(labels)
    //    .enter()
    //    .append('text')
    //    .text(d => d)
    //    .attr('fill', 'green')
    //    .attr('x', (d, i) => 10 + i * 30)
    //    .attr('y', (d, i) => 15 + i * 30)
    //    .call(drag)

    var vertical = d3.select(".chart")
      .append("div")
      .attr("class", "remove")
      .style("position", "absolute")
      .style("z-index", "19")
      .style("width", "1px")
      .style("height", "380px")
      .style("top", "10px")
      .style("bottom", "30px")
      .style("left", "0px")
      .style("background", "#ccc");

    d3.select(".chart")
      .on("mousemove", function() {
        mousex = d3.mouse(d3.select("#letable").node());
        mousex = mousex[0] + 5;
        vertical.style("left", mousex + "px")
      })
      .on("mouseover", function() {
        mousex = d3.mouse(d3.select("#letable").node());
        mousex = mousex[0] + 5;
        vertical.style("left", mousex + "px")
      });

  }
  redraw();

}

body {
  font: 10px "segoe ui";
}

.chart {
  background: #fff;
}

p {
  font: 12px "segoe ui";
}

.axis path,
.axis line {
  fill: none;
  stroke: #CCC;
  stroke-width: 2px;
  shape-rendering: crispEdges;
}

.pathLabel {
  font: bold 16px "Segoe UI";
  color: black;
  text-shadow: 0 0 3px #FFF;
}

button {
  position: absolute;
  right: 50px;
  top: 10px;
}

#my_custom_menu {
  display: none;
  padding: 15px 25px;
  width: 220px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 3px -2px #024;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/2.6.0/d3.min.js"></script>
<!DOCTYPE html>

<body>
  <script src="https://bgrins.github.io/spectrum/spectrum.js"></script>
  <script src="https://d3js.org/d3.v2.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <link href="https://bgrins.github.io/spectrum/spectrum.css" rel="stylesheet" />
  <table id="letable">
    <tr>
      <td>
        <div id="checkboxHolder" style="width:200px;height:400px;overflow:auto;">

        </div>
      </td>
      <td>
        <div class="chart" style="width:700px;height:400px">
        </div>
      </td>
    </tr>
  </table>
  <div id="my_custom_menu">
    <input id="textDisplayName" type="text" />
    <br />
    <input id="showPalette" type="text" />
    <br />
    <input type="hidden" id="stream" value="" />
  </div>
</body>

Answer 1

我不是 D3 方面的专家，所以您可能仍然想等待 Bostock 先生，但我认为您的问题是在重绘函数中，您有以下代码:

y.domain([0, d3.max(data, function(d) {
  if (!d.disabled) return d.y0 + d.y;
})]);

但是如果您查看 d 的值，它实际上没有禁用属性。

您可以在将禁用属性添加到父项的同时将其添加到值:

legend.on('change', function(d) {
    d.disabled = !d.disabled;
    $.each(d.values, function(){
        this.disabled = d.disabled;
    });
    d3.transition().duration(600).each(redraw);
});

可能有一种更优雅的方法来做到这一点，但它似乎可以解决问题。