Question

我正在尝试使用d3和DOM元素而不是SVG图形创建条形图。我无法理解每种方法。

我的数据如下：

data = [
  {
    month: "Aug",
    balances: [
      {
        date: "2015-08-13",
        balance: 500.00
      },
      {
        date: "2015-08-14",
        balance: 480.00
      },
      ...
    ]
  },
  {
    month: "Sep",
    balances: [
      {
        date: "2015-09-13",
        balance: 500.00
      },
      {
        date: "2015-09-14",
        balance: 480.00
      },
      ...
    ]
  },
  ...
]

我需要创建一个特定的标记布局，其中每个月都包含在它自己的<div class="graph-month"></div>中。然后我尝试用表示数据条的div来填充每个.graph-month。

问题是，我的酒吧被添加到身体，而不是单个.graph-month div。当我调试这个代码时，每个方法内部的d3.select（this）正确返回当前的“graph-month”d3选择，但append语句最终会附加到页面主体。

这是在Angular指令中，因此element [0]是包含指令。

var container = d3.select(element[0]);
container.selectAll('div')
  .data(data).enter()
  .append('div')
  .attr('class', "graph-month")
  .attr("data-month", function(d){ return d.month })
  .each(function(d,i){
    // draw the bar background and foreground
    d3.select(this) //should be selecting the current graph-month
      .data(d.balances).enter() //should be setting the data to dailyBalances
      .append('div')
      .attr('class', "graph-bar-background")
      .append('div')
      .attr('class', "graph-bar")
      .text(function(d){ return d.balance; }
   })
   .append('h5').text(function(d){
     return d.month;
   });

我的起始标记看起来像这样（减去所有包含等）

<html>
  <body>
    <bar-graph data="myData"></bar-graph>
  </body>
</html>

我的结束标记如下所示：

<html>
  <body>
    <bar-graph data="myData">
      <div class="graph-month" data-month="Aug">
        <h5>Aug</h5>
      </div>
      <div class="graph-month" data-month="Sep">
        <h5>Sep</h5>
      </div>
    </bar-graph>
  </body>
  <div class="graph-bar-background">
    <div class="graph-bar">500.00</div>
  </div>
  <div class="graph-bar-background">
    <div class="graph-bar">480.00</div>
  </div>
  <div class="graph-bar-background">
    <div class="graph-bar">500.00</div>
  </div>
  <div class="graph-bar-background">
    <div class="graph-bar">480.00</div>
  </div>
</html>

我想要达到的结果是：

<html>
  <body>
    <bar-graph data="myData">
      <div class="graph-month" data-month="Aug">
        <div class="graph-bar-background">
          <div class="graph-bar">500.00</div>
        </div>
        <div class="graph-bar-background">
          <div class="graph-bar">480.00</div>
        </div>
        <h5>Aug</h5>
      </div>
      <div class="graph-month" data-month="Sep">
        <div class="graph-bar-background">
          <div class="graph-bar">500.00</div>
        </div>
        <div class="graph-bar-background">
          <div class="graph-bar">480.00</div>
        </div>
        <h5>Sep</h5>
      </div>
  </body>
</html>

Answer 1

您错过了each功能

中的selectAll

.each(function(d,i){
    // draw the bar background and foreground
    d3.select(this) //should be selecting the current graph-month
        .selectAll('.graph-bar-background')
        .data(d.balances).enter() //should be setting the data to dailyBalances
        .append('div')
        .attr('class', "graph-bar-background")
        .append('div')
        .attr('class', "graph-bar")
        .text(function (d) { return d.balance; });
})

新行.selectAll('.graph-bar-background')表示您需要d.balances映射到的DOM集合。

D3每种方法都不按预期工作

1 个答案: