链接节点项的D3.js无法按预期工作

Question

d3js数据和代码

Nodes:[{"x":100,"y":300},{"x":250,"y":300},{"x":350,"y":150},{"x":350,"y":300},{"x":350,"y":450},{"x":450,"y":150},{"x":450,"y":300},{"x":450,"y":450},{"x":550,"y":300},{"x":650,"y":150},{"x":650,"y":300},{"x":650,"y":450}] 

Links:[{"source":"0","target":"1"},{"source":"1","target":"2"},{"source":"1","target":"3"},{"source":"1","target":"4"},{"source":2,"target":5},{"source":3,"target":6},{"source":4,"target":7},{"source":5,"target":8},{"source":6,"target":8},{"source":7,"target":8},{"source":8,"target":9},{"source":8,"target":10},{"source":8,"target":11}]

var color = d3.scale.category10();

        var svg = d3.select('#test').append('svg')
                .attr('width', width)
                .attr('height', height);

        var force = d3.layout.force()
                .size([width, height])
                .nodes(nodes)
                .links(linkArr)
                .start();
        force.linkDistance(200);
        var link = svg.selectAll('.link')
                .data(linkArr)
                .enter().append('line')
                .attr('class', 'link')
                .style("stroke", function(d,i){
                    return color(i)
                })
                .style("stroke-width", 1);

        var node = svg.selectAll('.node')
                .data(nodes)
                .enter().append('circle')
                .attr('class', 'node');


                node.attr('r', width / 25)
                .attr('cx', function(d) {
                    console.log(d.x)
                    return d.x;
                })
                .attr('cy', function(d) {
                    return d.y;
                });
                link.attr('x1', function(d) {
                    console.log("Object x1:"+JSON.stringify(d));
                    console.log("x1:"+d.source.x);
                    return d.source.x;
                    })
                .attr('y1', function(d) {
                            console.log("Object y1:"+JSON.stringify(d));
                            console.log("y1:"+d.source.y);
                    return d.source.y;
                })
                .attr('x2', function(d) {
                            console.log("x2:"+d.target.x);
                    return d.target.x;
                })
                .attr('y2', function(d) {
                            console.log("y2:"+d.target.y);
                    return d.target.y;
                });

绘图节点工作正常。这些行不是为前4个节点绘制的。我不知道我在这里失踪了什么。前4个节点的x1和y1值为空。 firefox检查的元素代码如下所示

<line class="link" style="stroke: rgb(31, 119, 180); stroke-width: 1;">
<line class="link" style="stroke: rgb(255, 127, 14); stroke-width: 1;">
<line class="link" style="stroke: rgb(44, 160, 44); stroke-width: 1;">
<line class="link" style="stroke: rgb(214, 39, 40); stroke-width: 1;">
<line class="link" style="stroke: rgb(148, 103, 189); stroke-width: 1;" x1="350" y1="150" x2="450" y2="150">
<line class="link" style="stroke: rgb(140, 86, 75); stroke-width: 1;" x1="350" y1="300" x2="450" y2="300">
<line class="link" style="stroke: rgb(227, 119, 194); stroke-width: 1;" x1="350" y1="450" x2="450" y2="450">
<line class="link" style="stroke: rgb(127, 127, 127); stroke-width: 1;" x1="450" y1="150" x2="550" y2="300">
<line class="link" style="stroke: rgb(188, 189, 34); stroke-width: 1;" x1="450" y1="300" x2="550" y2="300">
<line class="link" style="stroke: rgb(23, 190, 207); stroke-width: 1;" x1="450" y1="450" x2="550" y2="300">
<line class="link" style="stroke: rgb(31, 119, 180); stroke-width: 1;" x1="550" y1="300" x2="650" y2="150">
<line class="link" style="stroke: rgb(255, 127, 14); stroke-width: 1;" x1="550" y1="300" x2="650" y2="300">
<line class="link" style="stroke: rgb(44, 160, 44); stroke-width: 1;" x1="550" y1="300" x2="650" y2="450">.

请建议我如何解决它？

Answer 1

因为你的数据集中包含引号，所以删除它们就可以了：）

所以而不是：

{
  "source": "0",
  "target": "1"
}

你将拥有：

 {
      "source": 0,
      "target": 1
    }

工作代码：

＆＃13;

＆＃13;

var Nodes = [{
  "x": 100,
  "y": 300
}, {
  "x": 250,
  "y": 300
}, {
  "x": 350,
  "y": 150
}, {
  "x": 350,
  "y": 300
}, {
  "x": 350,
  "y": 450
}, {
  "x": 450,
  "y": 150
}, {
  "x": 450,
  "y": 300
}, {
  "x": 450,
  "y": 450
}, {
  "x": 550,
  "y": 300
}, {
  "x": 650,
  "y": 150
}, {
  "x": 650,
  "y": 300
}, {
  "x": 650,
  "y": 450
}]

var Links = [{
  "source": 0,
  "target": 1
}, {
  "source": 1,
  "target": 2
}, {
  "source": 1,
  "target": 3
}, {
  "source": 1,
  "target": 4
}, {
  "source": 2,
  "target": 5
}, {
  "source": 3,
  "target": 6
}, {
  "source": 4,
  "target": 7
}, {
  "source": 5,
  "target": 8
}, {
  "source": 6,
  "target": 8
}, {
  "source": 7,
  "target": 8
}, {
  "source": 8,
  "target": 9
}, {
  "source": 8,
  "target": 10
}, {
  "source": 8,
  "target": 11
}]

var color = d3.scale.category10();

var svg = d3.select('#test').append('svg')
  .attr('width', 1000)
  .attr('height', 1000);

var force = d3.layout.force()
  .size([1000, 1000])
  .nodes(Nodes)
  .links(Links)
  .start();
force.linkDistance(200);
var link = svg.selectAll('.link')
  .data(Links)
  .enter().append('line')
  .attr('class', 'link')
  .style("stroke", function(d, i) {
    return color(i)
  })
  .style("stroke-width", 1);

var node = svg.selectAll('.node')
  .data(Nodes)
  .enter().append('circle')
  .attr('class', 'node');


node.attr('r', 1000 / 25)
  .attr('cx', function(d) {
    console.log(d.x)
    return d.x;
  })
  .attr('cy', function(d) {
    return d.y;
  });
link.attr('x1', function(d) {
    console.log("Object x1:" + JSON.stringify(d));
    console.log("x1:" + d.source.x);
    return d.source.x;
  })
  .attr('y1', function(d) {
    console.log("Object y1:" + JSON.stringify(d));
    console.log("y1:" + d.source.y);
    return d.source.y;
  })
  .attr('x2', function(d) {
    console.log("x2:" + d.target.x);
    return d.target.x;
  })
  .attr('y2', function(d) {
    console.log("y2:" + d.target.y);
    return d.target.y;
  });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='test'>

</div>

＆＃13;

＆＃13;

＆＃13;