Question

我是D3的新手，我正在尝试创建一个Hive图，但是当我运行代码时，它给了我很多错误，如下所示：

>Error: <path> attribute d: Expected number, "MNaN,NaNCNaN,NaN …"
>Error: <circle> attribute transform: Expected number, "rotate(NaN)"
>Error: <circle> attribute cx: Expected length, "NaN"

下面是一些代码，以显示我最后拥有的东西

data.json

{
    links: [
        {source: "charlie", target: "carl", value:1},
        {source: "charlie", target: "sophia", value:1},
        {source: "charlie", target: "rex", value:1}
    ],
    nodes: [
        {id: "carl", group:"family"},
        {id: "charlie", group:"family"},
        {id: "sophia", group:"friend"},
        {id: "rex", group:"friend"}
   ]
}

main.js 文件包含

var width = 960,
height = 500,
innerRadius = 40,
outerRadius = 240;

var angle = d3.scaleBand().domain(d3.range(4)).range([0, 2 * Math.PI]),
    radius = d3.scaleLinear().range([innerRadius, outerRadius]),
    color = d3.scaleOrdinal(d3.schemeCategory20);

d3.json("data.json", function(error, data) {
    if (error) throw error;

    var nodes = data.nodes;
    var links = data.links;

    var svg = d3.select("#chart").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 +")");

    svg.selectAll(".axis")
        .data(d3.range(3))
        .enter().append("line")
        .attr("class", "axis")
        .attr("transform", function(d) { return "rotate(" + degrees(angle(d)) + ")"; })
        .attr("x1", radius.range()[0])
        .attr("x2", radius.range()[1]);

    svg.selectAll(".link")
        .data(links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", d3.hive.link()
        .angle(function(d) { return angle(d.x); })
        .radius(function(d) { return radius(d.y); }))
        .style("stroke", function(d) { return d3.scaleOrdinal(d3.schemeCategory20); });

    svg.selectAll(".node")
        .data(nodes)
        .enter().append("circle")
        .attr("class", "node")
        .attr("transform", function(d) { return "rotate(" + degrees(angle(d.x)) + ")"; })
        .attr("cx", function(d) { return radius(d.y); })
        .attr("r", 5)
        .style("fill", function(d) { return d3.scaleOrdinal(d3.schemeCategory20); });

    function degrees(radians) {
        return radians / Math.PI * 180 - 90;
    }
});

d3.hive.link（） 来自名为 d3.hive.min.js 的外部文件>

我知道结果会有所不同，因为数据不同，但是我想得到类似link的东西。

任何可以帮助我更正错误以显示数据的建议都是有帮助的。

蜂巢图-错误：属性d：期望数字，“ MNaN，NaNCNaN，NaN…”

0 个答案: