使用数据中的 d3 显示圆圈

Displaying circles using d3 from data

本文关键字：显示 d3 数据      更新时间：2023-09-26

在这个小提琴中，我试图画从文件中读取的圆圈：

http://jsfiddle.net/zzz8svuq/17/

但是没有出现圆圈。

在这里，我将数据绑定到svg： 

    svg.data(data)
            .enter().append("circle")
            .attr("stroke", "red")
            .attr("stroke-width" , "2px")
            .attr("cx", xMap)

这是不正确的 ？

小提琴代码 ： 

 var data = d3.csv.parse( d3.select("pre#data").text() );
        var margin = {top: 20, right: 20, bottom: 130, left: 140},
                width = 960 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;
        var svg = d3.select("body").append("svg")
                .attr("width", 500)
                .attr("height",500)
                .append("g");
        var xValue = function (data) {
            return data.x;
        }
        xScale = d3.scale.linear().range([0, width - margin.left - margin.right]) // value -> display
        xMap = function (d) {
            return xScale(xValue(d));
        }
        svg.data(data)
                .enter().append("circle")
                .attr("stroke", "red")
                .attr("stroke-width" , "2px")
                .attr("cx", xMap)
<pre style="display:none" id="data">
    label,x,y,r
l1,100,30,50
l2,5,5,100
l3,50,50,20
</pre>
    body {
        font: 11px sans-serif;
    }
    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

更新：

添加

.attr("cy", 5)
.attr("r", 5)

但相同的结果

圆需要3个属性cx，cy（位置）和r（半径）。您没有提供 cy 或 r 和 r 默认值为 0，这意味着您的圆圈不会呈现。

如果要

将圆圈从 json 数据附加到容器，则必须将数据绑定到容器内的选择，而不是将数据绑定到容器。试试这种方式。

svg.selectAll("circle")
     .data(data)
     .enter().append("circle")
     .attr("stroke", "red")
     .attr("stroke-width" , "2px")
     .attr("cx", xMap) //Center point X
     .attr("cy", yMap) // Center point Y
     .attr("r", 5); //Radius

确认 cx、cy 和 r 属性有效。

相关文章：