1

尝试按照此处的教程进行操作，但没有足够的代码提供给我来弥补差距。

这是我正在努力完成同样事情的小提琴，加载了 d3，但是，动画转换不会同时发生，更不用说，它只是改变属性，这是我在 SVG 硬编码中已经熟悉的东西使用 JQuery 选择器。那么我哪里错了，或者错过了船？

// 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 的补间，但我无法获得基础知识。感谢您提前提供帮助......

4

2 回答 2

2

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

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

因此，您可以使用它来选择子元素，就像在原始示例中一样。

例如。你的小提琴可以这样重写：

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.
});
于 2013-04-11T01:33:07.597 回答
1

这是你要找的吗？持续时间是可选的，但是当它有点慢时更容易看到正在发生的事情。

$('#svg').on('click', function() {
    d3.selectAll('circle').style("fill", "grey").transition().duration(5000).style("fill", "steelblue").attr("cy", 90).attr("r", 30);
});
于 2013-04-10T17:50:35.650 回答