Question

出于某种原因，

chart.selectAll("g").data(data).enter().append("g")

不起作用，但

chart.selectAll("rect").data(data).enter().append("rect")

确实有效。通过“工作”，我的意思是chart表示的元素最终包含许多“rect”/“g，每个数据项一个。第二行导致元素最终包含许多rect，但如果使用g则不会显示任何内容。任何从rect到g进行简单更改的想法都会导致错误？

代码：

var chart  = svg.append("g")
                  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // setup chart axis.
        chart.append("g")
              .attr("class", "x axis")
              .call(xAxis);

          chart.append("g")
              .attr("class", "y axis")
              .call(yAxis)
            .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text(yLabel);

    // Pertinent code here    
    var rows = chart.selectAll("g").data(data).enter().append("g");

Answer 1

不确定你想要什么，但是：

如果你想要这样的东西：

svn 
  g //one g for every data row
  g //y axis
  g //x axis

然后这样的事情应该有效：

var chart  = svg
var chartLines = chart
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
 .attr("class", "line");

// setup chart axis.
    chart.append("g")
          .attr("class", "x axis")
          .call(xAxis);

      chart.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text(yLabel);

// Pertinent code here    
var rows = chart.selectAll(".line").data(data).enter().append("g");

Answer 2

这是因为当您运行此代码时，页面上已经有很多g个元素 - 其中一些元素由您添加，其中一些元素在您调用轴组件时由D3添加。但是没有rect元素，因此代码可以正常工作。

有几种解决方法 - 您可以先运行将数据绑定到g元素的代码，在单独的g元素中添加轴和图表，然后向{添加一个类{1}}您要将数据绑定到的元素，或这些元素的任意组合。

this tutorial中的更多背景和示例。

selectAll（“g”）。data（data）.enter（）。append（“g”）不起作用？

2 个答案: