如何在缩放时更新节点样式

Question

我想根据节点的大小更改节点样式。在给定的示例中，我想将缩放系数低于 0.5 的红色节点着色，否则使用组颜色。我尝试了以下代码，但它返回一条错误消息：null 不是对象 (d3.event.transform(。根据错误代码，我认为d3.event.transform尚未初始化。

有没有办法从节点样式函数中获取缩放系数？

var node = pane.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("class", "node")
    .attr("r", function(d) { return d.value*5   })
    .style("fill", function(d) {
           return (d3.event.transform.k < 0.5) ? "red": color(d.group);
    });

Answer 1

共享代码摘录不完整，但我想这与最初生成绘图时使用的代码相对应，并且它没有包装在"缩放"事件的侦听器中。

应该做的是：

1. 使用默认颜色初始化图形
2. 更新缩放时的填充颜色事件。

更新的代码：

初始化图形：

var node = pane.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("class", "node")
    .attr("r", function(d) { return d.value*5   })
    .style("fill", function(d) {
           return color(d.group);
    });

然后收听缩放事件：

node.on('zoom', function() {
    node.selectAll('circle')
      .style('fill', function(d) {
        return (d3.event.transform.k < 0.5) ? 'red': color(d.group);
    })
})

Answer 2

我最终设法让它工作，node.on("zoom"，...(对我不起作用，但它在缩放函数中的功能使我受益匪浅。我猜节点永远不会获得缩放事件，可能是因为调用(缩放(函数附加到整个图形。

function zoomed() {
    d3.selectAll('circle').style('fill', function(d) {
        return (d.value > d3.event.transform.k) ? 'red': color(d.group);
    })
    pane.attr("transform", d3.event.transform);
}

大于缩放比例的节点将着色为红色(此处为小提琴(。这可能不是最好的解决方案，特别是对于大型图形，但这是有效的。