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

共享代码摘录不完整，但我猜这与初始生成图形时使用的代码相对应，并且不会包含在＆＃39; zoom＆＃39;的监听器中。事件

应该做的是：

使用默认颜色启动绘图
更新缩放事件的填充颜色。

更新的代码：

初始化图纸：

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);
    });

然后听zoom事件：

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);
}

大于缩放比例的节点变为红色（小提琴here）。这可能不是最好的解决方案，特别是对于大型图表，但这项工作。

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

2 个答案: