d3 问题。圆形图像未出现

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");

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;
        });

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

第一条语句实际上 insert/append 您的圈子使用 enter() 选择。它们存在于 svg 中，但由于未设置任何属性，因此为空。此外，您没有保留对它们的引用，因为您没有将它们分配给任何变量。

第二条语句使用对 var circles 的赋值。但是，绑定相同数据并再次引用 enter() 选择将产生空选择，因为实际上没有新数据输入。使用此空选择，您尝试设置 cx、cy 和 r 等属性的尝试没有结果。不过，在删除了第一个后，这条语句现在可以完成您正在寻找的工作。

查看以下文章之一以更详细地了解如何使用 d3 进行数据连接：

d3 问题。圆形图像未出现

d3 problems. Circle image not appearing

d3.js