Question

我正在使用D3-pack-Layout。一切进展顺利，我甚至在点击按钮时添加了转换。现在我还想在一开始就添加转换。我希望我的泡泡在开始时飞入。在我介绍转换之前，代码看起来像这样并且工作正常：

d3.csv("myData.csv", function(error, data) {
dataset = data;
generateVis();
});

function generateVis() {

var pack = d3.layout.pack()
    .sort(function(a, b) {
        return b.Order1 - a.Order1;
    })
    .size([width,height])
    .value(function(d) { return d.value; })
    .padding(5);

var node = svg.selectAll(".node")
    .data(pack.nodes({children: dataset}).slice(1))
    .enter()
    .append("circle")
    .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
    .attr("transform", function(d){return "translate("+d.x+","+d.y+")";})
    .attr("r",function(d) {return d.r;})
    .attr("class", "hover")
    .attr("myX", function(d) { return d.x; })
    .attr("myY", function(d) { return d.y; });
}

如果我添加转换，我会得到＆＃34; Uncaught TypeError：undefined不是函数＆＃34;。这是为什么？代码如下所示：

d3.csv("myData.csv", function(error, data) {
dataset = data;
generateVis();
});

function generateVis() {

var pack = d3.layout.pack()
    .sort(function(a, b) {
        return b.Order1 - a.Order1;
    })
    .size([width,height])
    .value(function(d) { return d.value; })
    .padding(5);

var node = svg.selectAll(".node")
    .data(pack.nodes({children: dataset}).slice(1))
    .enter()
    .append("circle")
    .transition()
    .duration(1000)
    .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
    .attr("transform", function(d){return "translate("+d.x+","+d.y+")";})
    .attr("r",function(d) {return d.r;})
    .attr("class", "hover")
    .attr("myX", function(d) { return d.x; })
    .attr("myY", function(d) { return d.y; });
}

Answer 1

在工具提示代码中，您在转换对象上调用.on。因此没有on方法：

Uncaught TypeError: undefined is not a function

重要的是要记住，在方法链接中，你正在对链中的最后一件事做出回报。

将.on移至.transition之前，您可以轻松解决问题，因为您想在.append选项上调用它。

.append("circle")
.on("mouseover", function(d) {
    ...
})
.transition()
...

更新了example。

为什么我会得到一个＆＃34; Uncaught TypeError＆＃34;当我介绍D3 .transition（）？

1 个答案: