Question

我有一个简单的视觉效果，超过100个，我说。出于美学目的，我想在鼠标点击上创造高光效果。我还想通过在用户点击新的rect后删除该效果来使这种效果更加直观。但是，如果不诉诸d3.selectAll()电话我就无法工作，所以我认为如果这个项目变得更大，这种方法可能并不理想。这是代码：

.on('click.highlight', function() {
//set any previously highlighted rects back to normal color/brightness
    d3.selectAll('.highlight').transition().duration(250)
        .style('fill', function(d) { return d3.rgb(d.color)})

    d3.select(this).classed('highlight',true);

//now it's safe to assign the current highlighted rect a brighter hue... i think
    d3.select(this).transition().duration(250)
        .style('fill', function(d) { return d3.rgb(d.color).brighter(.5)})
})

虽然这段代码完成了我想要它做的事情，但可能只有1个其他highlight矩形在任何给定时间都要担心。再说一遍，我不确定在这里使用d3.selectAll()是否合理。

无论如何，有没有更有效的方法？如果可能的话，我希望将其全部保留在.on('click')个函数中。

Answer 1

如果您希望避免使用.selectAll，则可以创建一个包含最后一次单击矩形的rect选项。每次单击一个矩形：

取消突出显示之前选中的突出显示的矩形
更新该选择以反映最近点击的矩形
突出显示新选择的矩形

我使用变量highlightedRect来保留允许上述工作流程的选择：

var svg = d3.select("body").append("svg")
  .attr("width",600)
  .attr("height",400);
  
var highlightedRect = d3.select(null);

var rects = svg.selectAll("rect")
  .data(d3.range(1600))
  .enter()
  .append("rect")
  .attr("y",function(d) { return Math.floor(d/50)*12; })
  .attr("x",function(d) { return d%50 * 12 })
  .attr("width",11)
  .attr("height",11)
  .attr("stroke","white")
  .on("click",function(d) {
    // Recolor the last clicked rect.
    highlightedRect.attr("fill","black");
    // Color the new one:
    highlightedRect = d3.select(this);
    highlightedRect.attr("fill","steelblue");
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

D3选择亮点（效率？）

1 个答案: