Question

我正在使用d3 v4，并尝试将数据用作文本元素。

在我的index.html中，我有

<h3 id='my_text' class="text-center">
            This is my color:
        </h3>

我的d3代码是：

var data = [{"color":"red"}]

var txt = d3.select("#my_text")
      .append("text")

txt
  .data(data)
  .enter()
  .style("text-anchor", "start")
  .attr("fill", "black")
  .attr("y", 220)
  .attr("x", 30)
  .text( function (d) { return d.color; });

我希望看到This is my color: Red，但我只会看到This is my color:

Answer 1

I edit your code with some other exapmles

<!DOCTYPE HTML>
<html>
<head>

    
    <script src="https://d3js.org/d3.v4.min.js"></script>
   
    

</head>

<body>
    <h3 id='my_text' class="text-center">
        This is my color:
    </h3>
   
    <div id="d2">Second paragraph</div>
    <script>
        var pdata = [{ "color": "red" }];
        d3.select("#my_text").style("color", "blue");
        var txt = d3.select("#my_text")
            .append("p")
            .data(pdata)
            .text(function (d) { return d.color; });


    </script>
    <script>

        d3.select("#d2").style("color", "red");

        d3.select("#d2").append("div");

        var matrix = [
            [11975, 5871, 8916, 2868],
            [1951, 10048, 2060, 6171],
            [8010, 16145, 8090, 8045],
            [1013, 990, 940, 6907]
        ];
        var tr = d3.select("body")
            .append("table")
            .selectAll("tr")
            .data(matrix)
            .enter().append("tr");
        var tr = d3.select("body")
            .append("table")
            .selectAll("tr")
            .data(matrix)
            .enter().append("tr");

        var td = tr.selectAll("td")
            .data(function (d) { return d; })
            .enter().append("td")
            .text(function (d) { return d; });

    </script>



</body>
</html>

D3文字附加将不会显示数据

1 个答案: