Question

我正在学习本教程：

到目前为止我有这个代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
        <link rel="stylesheet" href="custom.css">
    </head>
    <body>
        <script type="text/javascript">
        var w = 500;
        var h = 100;

        var svg = d3.select("body")
          .append("svg")
          .attr("width", w)   // <-- Here
          .attr("height", h); // <-- and here!


        // var dataset = [];                                     //Initialize empty array
        // for (var i = 0; i < 25; i++) {                        //Loop 25 times
        //     var newNumber = Math.round(Math.random() * 30);   //New random number (0-30)
        //     dataset.push(newNumber);                          //Add new number to array
        // }
        var dataset = [ 5, 10, 15, 20, 25 ];

        svg.selectAll("circle")
          .data(dataset)
          .enter()
          .append("circle");

        var circles = svg.selectAll("circle")
          .data(dataset)
          .enter()
          .append("circle");

          circles.attr("cx", function(d, i) {
                  return (i * 50) + 25;
                })
                .attr("cy", h/2)
                .attr("r", function(d) {
                  return d;
                });

SVG标记显示但标记中没有任何圆圈。到底是怎么回事？我错过了什么？目前它只是一个空的SVG标签。

Answer 1

要使其正常工作，请删除第一个

svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle");

＆＃13;

var w = 500;
        var h = 100;

        var svg = d3.select("body")
            .append("svg")
            .attr("width", w) // <-- Here
        .attr("height", h); // <-- and here!


        // var dataset = [];                                     //Initialize empty array
        // for (var i = 0; i < 25; i++) {                        //Loop 25 times
        //     var newNumber = Math.round(Math.random() * 30);   //New random number (0-30)
        //     dataset.push(newNumber);                          //Add new number to array
        // }
        var dataset = [5, 10, 15, 20, 25];

    	//svg.selectAll("circle")
		//    .data(dataset)
		//    .enter()
		//    .append("circle");


        var circles = svg.selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle");

        circles.attr("cx", function (d, i) {
            return (i * 50) + 25;
        })
            .attr("cy", h / 2)
            .attr("r", function (d) {
            return d;
        });

＆＃13;

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

＆＃13;

第一个声明确实使用enter()选项插入/附加您的圈子。它们存在于svg中，但由于没有设置任何属性，因此它们是空的。此外，您没有保留对它们的引用，因为您还没有将它们分配给任何变量。

第二个语句使用var circles的作业。但是，绑定相同的数据并再次引用enter()选择将产生一个空选择，因为实际上没有新的数据输入。使用此空白选项，您尝试设置cx，cy和r等属性是徒劳的。但是，删除了第一个语句后，此语句现在完全符合您要求的工作。

检查以下文章之一，以获取有关在d3中使用数据连接的更详细视图：

d3问题。圆形图像没有出现

1 个答案: