Question

我是D3的新手，我正在尝试解决作业。

我正在尝试通过绘制此数据集（样本）中的节点来绘制网络图。

{“节点”：[       {         “ id”：“ site09”，         “ x”：317.5，         “ y”：282.5       }，       {         “ id”：“ site01”，         “ x”：112，         “ y”：47       }，       {         “ id”：“ site03”，         “ x”：69.5，         “ y”：287       }，       {         “ id”：“ site04”，         “ x”：424.5，         “ y”：99.5       }]

“链接”：[       {“ node01”：“ site05”，“ node02”：“ site08”，“金额”：10}，       {“ node01”：“ site05”，“ node02”：“ site02”，“金额”：120}，       {“ node01”：“ site05”，“ node02”：“ site03”，“金额”：50}，

我想使用数据集中的x和y绘制圆的位置。

我尝试了以下操作，但圆圈/节点未显示。

//importing the json data
    d3.json("project.json", function(data) {
        console.log(data);

        svgCanvas.selectAll("circle")
        .data(data).enter() // create place hodlers if the data are new .append("circle") // create one circle for each
        .append("svg:circle")
        .attr("cx", function(data){
            return data.x;})
        .attr("cy", function(data){
            return data.y;})
        .attr("r", function(thisElement, index){
              // use the value from data to create the radius
        return thisElement["amount"]})

        vis.selectAll("circle.nodes")
        .data(nodes)
        .enter()
        .append("svg:circle")
        .attr("class", "nodes")
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("r", "10px")
        .attr("fill", "black") 

    })
}

谢谢

插入网络图D3的节点位置

0 个答案: