Question

尝试按照教程here进行操作，但没有足够的代码来弥补差距。

Here is the fiddle我正在努力完成相同的事情，加载了d3，然而，动画过渡不是同时发生的，更不用说，它只是改变属性，我已经熟悉的东西在使用JQuery选择器的SVG硬编码中。那么我哪里出错了，还是错过了船？

// example code doesn't work
var circle = svg.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("cy", 90);
circle.attr("r", 30);

// this does, but animations don't work
d3.selectAll('circle').style("fill", "steelblue");
d3.selectAll('circle').attr("cy", 90);
d3.selectAll('circle').attr("r", 30);

我最终试图利用d3的补间，但我无法实现基础。谢谢你提前帮忙....

Answer 1

在示例代码中，svg先前已分配给d3选择对象：

 var svg = d3.select("#chart-2").append("svg")
      .attr("width", w)
      .attr("height", h);

因此，您可以使用它来选择子元素，如原始示例中所示。

EG。你的小提琴可能是rewritten like so：

var svg = d3.select("#svg");

//svg is now a d3.selection object.
svg.on("click", function() {
    var circle = svg.selectAll("circle");
    circle.style("fill", "steelblue");
    circle.attr("cy", 90);
    circle.attr("r", 30);
});

关于使用d3绑定事件的注意事项：

在匿名函数中：

该事件已绑定到d3.event
dom元素 - 不是d3.selection对象 - 绑定到this
如果将参数传递给函数，它将绑定到与元素连接的数据。

不是真正的代码，但应该表明我的意思：

var someD3Selection = d3.select("#someElement");

someD3Selection.on("click", function(boundData) {
    d3.event.preventDefault(); // <-- here's the event
    this; // <-- the actual dom element which is selected in someD3Selection
    d3.select(this); // <-- same as someD3Selection.
});

Answer 2

这是你要找的吗？持续时间是可选的，但是当它慢一点时，更容易看到发生了什么。

$('#svg').on('click', function() {
    d3.selectAll('circle').style("fill", "grey").transition().duration(5000).style("fill", "steelblue").attr("cy", 90).attr("r", 30);
});

d3基本动画

2 个答案: