Question

我必须绘制一个自定义极坐标图，其中圆的半径变化，网格线以30度分离创建。下面是我的代码，用于绘制圆。问题是我无法在svg上绘制网格线。网格线从列表网格中获取值，并且其值为x1，y1，x2，y2格式。知道为什么不绘制网格线？ The image shows that it is taking only a single value from the list and appending it in the variables x1,y1,x2,y2

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
    <div id="circles"></div>
    <script type="text/javascript">

    var circleRadii = [100,90,80,70,60,50,40,30,20];
    var min_radii = d3.min(circleRadii);
    var max_radii = d3.max(circleRadii);
    var theta_range = d3.range(0,360,30);
    document.write(theta_range);


    //set the svg container size
    width = 750;
    height =  750;
    grid = [395,375,392.32,385,385,392.32,375,395,365,392.32,357.68,385,355,375,357.68,365,365,357.68,375,355,385,357.68,392.32,365,395,375]

    var svgContainer = d3.select("body").append("svg")
                                        .attr("width",width)
                                        .attr("height",height);

    var circles = svgContainer.selectAll("circle")
                              .data(circleRadii)
                              .enter()
                              .append("circle")

    var circleAttributes = circles
                          .attr("cx",width/2)
                          .attr("cy",height/2)
                          .attr("r", function (d) { return d; })
                          .style("stroke","gray")
                          .style("fill","white"); 


    var gridlines  = svgContainer.append("gridline")
                    .data(grid)
                    .enter().append("gridline")
                    .attr("x1",function(d){return d;})
                    .attr("y1",function(d){return d;})
                    .attr("x2",function(d){return d;})
                    .attr("y2",function(d){return d;})
                    .attr("stroke", "black")
                    .attr("stroke-width", 2);     
console.log(gridlines);
</script>
</body>
</html>

自定义极坐标图与网格线D3.js

0 个答案: