Question

使用d3.v3.min.js和示例D3 Zoomable Plot作为参考，我构建了一个散点图。最相关的位是：

var svg = d3.select("#scatter1")
    .append("svg")
    .attr("width", outerWidth)
    .attr("height", outerHeight)
    .attr("viewBox", "0 0 " + (width + margin.left + margin.right) + " " + (height + margin.top + margin.bottom))
    .attr("preserveAspectRatio", "xMidYMid meet")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var objects = svg.append("svg")
    .classed("objects", true)
    .attr("width", width)
    .attr("height", height);

objects.selectAll(".dot")
    .data(values)
    .enter().append("circle")
    .classed("dot", true)
    .attr("r", function (d) {
        return 6 * Math.sqrt(2.0 / Math.PI);
    })
    .attr("transform", transform)
    .style("fill", colorVal);

和一些需要的css：

.dot {
  fill-opacity: .5;
}

.dotHidden {
  fill-opacity: .1;
}

我的数据值定义为：

var values = [[x0, y0], [x1, y1], ....];

每个元素都有一个自定义属性idx，即

values[i].idx === i

现在我想只突出点元素的一个子集，即只有那些在索引列表中的元素，例如selectedIdx = [4, 8, 10, 38, 90]。我怎样才能以最快的方式做到这一点？是否有d3 js惯用的方法呢？我试图在下面这样做，它的工作是＆＃34;隐藏＆＃34;所有的点，但我实际上只想隐藏不在selectedIdx。

的那些

d3.select("#scatter1 svg")
  .selectAll("circle")
  .attr("class", "dotHidden");

更新：这是How to get the index of the data element in a histogram on mouseover?

问题的后续跟进

Answer 1

使用classed。然后，您只需要遍历所有元素一次。此外，您的代码会更加强大，因为您确保dotHidden中的所有圈子都设置了selectIdx类。

d3.select("#scatter1 svg")
  .selectAll("circle")
  .classed("dotHidden", function(d, i) {
    return selectIdx.indexOf(i) === -1;
  });

如果您正在运行ES2015或使用转换器，则可以改善回调：

.classed("dotHidden", (d, i) => selectIdx.indexOf(i) === -1);

Answer 2

获得所选数据（而不是索引）后，您可以使用d3.js的数据绑定功能，尤其是selection.exit()：

d3.select("#scatter1 svg")
  .selectAll("circle")
  // make sure to reset all circles to normal
  .classed("dotHidden", false);  
  .data(selectedValues)
  // narrow selection to values that are not in selectedValues
  .exit()
  .classed("dotHidden", true);

在Scatter图中通过索引匹配元素的最佳方法是什么？

2 个答案: