График улья - ошибка: атрибут d: ожидаемое число, «MNaN, NaNCNaN, NaN…» - PullRequest
Новая
       14

График улья - ошибка: атрибут d: ожидаемое число, «MNaN, NaNCNaN, NaN…»

0 голосов
/ 09 апреля 2019

Я новичок в D3 и пытаюсь создать Hive Plot, но когда я запускаю код, он выдает мне несколько ошибок следующим образом: 

>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

Я знаю, что результат не будет таким же, так как данные разные, но я хотел бы получить что-то вроде этого ссылка .

Любые предложения, которые могут помочь мне исправить ошибки в порядкедля отображения данных будет полезно.

...