Question

我正在研究能够过滤数据的散点图。我的问题是，当我过滤并删除一些数据时，显示的数据不再填满容器。我需要将域更新到新范围（排除已删除的数据点）。这是我的代码：

var parseTime = d3.timeParse("%Y-%m-%d");

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var svg = d3.select("body").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 draw(data, instrument) {

  var data = data[instrument];

  data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.close = +d.close;
        d.year = +d.dyear;
        d.month = +d.month;
        d.day = +d.day;
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, 1.2*d3.max(data, function(d) { return d.close; })]);

    svg.selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
    .style("fill", "red")
    .attr("r", 3.5)
    .attr("cx", function(d) { return x(d.date); })
    .attr("cy", function(d) { return y(d.close); })
    .filter(function(d) { return d.day > 12; })
    .remove();

  svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x)
      .ticks(10));

  svg.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y)
            .ticks(8));
    }

var dataset = d3.json("test.json", function(error, data) {
  if (error) throw error;

  draw(data, "test_instrument");

});

Answer 1

您应该过滤数据，然后根据过滤的数据集重置scale'domain。您可能不需要删除不符合条件的圈子，而是设置“可见性”或“不透明度”（取决于您要隐藏的数量）

let threshold = 12;

let filteredData = data.filter(function(d){ return d.day > threshold ; })
...
x.domain(d3.extent(filteredData , function(d) { return d.date; }));
...
svg.selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
    ...
    .style("visibility", function(d) { return d.day > threshold ? "visible": "hidden"; })

如何在d3.js中重新缩放显示的数据？

1 个答案: