SVG附加导致D3 JavaScript上的d.join错误 [英] SVG append causes d.join error on D3 JavaScript

问题描述

我想在图形上绘制轴，但是当我在下面的行追加svg与g时，我收到一个 TypeError：d.join不是一个函数：

I'm trying to draw axes on a graph but when I append svg with g with the following line, I receive an error of TypeError: d.join is not a function:

svg.append("g")
        .attr("transform", "translate(0," + height / 2 + ")")
        .call(xAxis);

svg.append("g")
        .attr("transform", "translate(" + width / 2 + ",0)")
        .call(yAxis);

但是，当我删除这些行时，错误消失。任何想法如何解决这个？这是 DEMO 。

However, when I delete these lines, error disappears. Any ideas on how to solve this? Here is the DEMO.

谢谢！

推荐答案

此行引起问题：

var path = svg.selectAll("path");

这是选择所有 path svg。添加轴时，它们还包含正在选择但不是部分voronoi的路径元素。解决方案是使此选择器更具体：

This is selecting all the path elements of the svg. When you add the axis, they also contain path elements that are being selected but aren't part of the voronoi. The solution is to make this selector more specific:

var path = svg.selectAll(".step"); //<-- select by class "step" 

function redraw() {
    var d = [];
    for (var i = 0; i < k; i++) {
        d.push([X(x_means[i]), Y(y_means[i])]);
    }
    var vd = voronoi(d);
    var v = path
            .data(vd, polygon);

    v.exit().remove();

    v.enter()
            .append("path")
            .attr('class','step'); //<-- when you add a voroni path give it that class

更新示例此处。

这篇关于SVG附加导致D3 JavaScript上的d.join错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！