D3-将条形添加到组中 [英] D3 - Add bars into group

问题描述

我在这里有一个堆叠闪电战- https://stackblitz.com/edit/chart-update-1-34uvdo?file=src/app/bar-chart.ts

I have a stackblitz here - https://stackblitz.com/edit/chart-update-1-34uvdo?file=src/app/bar-chart.ts

这是一个有角度的应用程序中的d3图表.

It's a d3 chart in an angular app.

工具栏上的箭头显示了工具栏的开始和结束位置.

The bars have arrows to show the start and finish position of the bar.

我希望每个条形箭头组合都包含在一个g元素中-目前它们都在同一个g元素中.

I'd like to have each bar arrow compo in one g element - at the moment they are all in the same g element.

如何为每个长条和箭头添加一个g元素.

How can I craete a g element for each bar and arrow.

bar.enter()
    .append("line")
    .attr("x1", d => this.x(d.phase) + this.x.bandwidth() / 2)
    .attr("y1", d => this.y(d.start) + ((d.start < d.finish) ? -5 : 5))
    .attr("x2", d => this.x(d.phase) + this.x.bandwidth() / 2)
    .attr("y2", d => this.y(d.finish) + ((d.start < d.finish) ? 5 : -5))
    .attr("stroke", "black")
    .attr("stroke-width", 3)
    .attr("marker-end", "url(#arrow)")
    .style('pointer-events', 'none'); 

推荐答案

再次查看d3 常规更新模式.这是d3概念中的一个总是会造成一些混乱，尤其是将其应用于除最简单的示例以外的任何内容时.

Have a look again at the d3 general update pattern. It is one of those d3 concepts that will always be a little confusing, especially when applying it to anything except the simplest examples.

因此，通过查看上述模式，我们可以将其分解为:

So by looking at the above pattern we can break it down as:

• 数据联接

• Data Join

使用旧元素加入新数据(如果有).

Join new data with old elements, if any.

更新

Update

根据需要更新旧元素.

Update old elements as needed.

输入

Enter

根据需要创建新元素.

Create new elements as needed.

输入+更新

Enter + Update

将输入的元素与更新选择合并后，对这两个元素都应用操作.

After merging the entered elements with the update selection, apply operations to both.

退出

Exit

根据需要删除旧元素.

Remove old elements as needed.

private drawUpdate(data) {
  this.x.domain(data.map((d: any) => {
    return d.phase
  }));

  this.getExtent(data);

  this.y.domain(d3.extent(this.values));

  this.createAxis();

  // Data Join
  const bar = this.chart.selectAll(".bargroup")
    .data(data);

  // Updates
  // Update rect dimensions
  bar.select('rect').attr("x", (d, i) => {
    return this.x(d.phase)
  })
    .attr("width", (d, i) => {
      return this.x.bandwidth()
    })
    .attr("y", (d, i) => {
      if (d.start < d.finish) {
        return this.y(d.finish);
      } else {
        return this.y(d.start);
      }
    })
    .attr("height", (d, i) => {
      if (d.start < d.finish) {
        return this.y(d.start) - this.y(d.finish);
      } else {
        return this.y(d.finish) - this.y(d.start);
      }
    })

  // Update line dimensions
  bar.select('line')
    .attr("x1", d => this.x(d.phase) + this.x.bandwidth() / 2)
    .attr("y1", d => this.y(d.start) + ((d.start < d.finish) ? -5 : 5))
    .attr("x2", d => this.x(d.phase) + this.x.bandwidth() / 2)
    .attr("y2", d => this.y(d.finish) + ((d.start < d.finish) ? 5 : -5))

  // Enter
  const barEnter = bar.enter()
    .append("g")
    .classed('bargroup', true)

  // Enter & update - append new rects, update dimensions
  barEnter
    .append('rect')
    .attr("x", (d, i) => {
      return this.x(d.phase)
    })
    .attr("width", (d, i) => {
      return this.x.bandwidth()
    })
    .attr("y", (d, i) => {
      if (d.start < d.finish) {
        return this.y(d.finish);
      } else {
        return this.y(d.start);
      }
    })
    .attr("height", (d, i) => {
      if (d.start < d.finish) {
        return this.y(d.start) - this.y(d.finish);
      } else {
        return this.y(d.finish) - this.y(d.start);
      }
    })

  // Enter & update - append new lines, update dimensions
  barEnter
    .append("line")
    .attr("stroke", "white")
    .attr("stroke-width", 3)
    .attr("marker-end", "url(#arrow)")
    .style('pointer-events', 'none')
    .attr("x1", d => this.x(d.phase) + this.x.bandwidth() / 2)
    .attr("y1", d => this.y(d.start) + ((d.start < d.finish) ? -5 : 5))
    .attr("x2", d => this.x(d.phase) + this.x.bandwidth() / 2)
    .attr("y2", d => this.y(d.finish) + ((d.start < d.finish) ? 5 : -5))

  //Exit
  bar.exit()
    .remove();

  d3.select('.y-axis').call(this.y_axis)

  d3.select('.x-axis').call(this.x_axis)
    .attr("transform", "translate(0," + this.height + ")");

}

更新了stackblitz

这篇关于D3-将条形添加到组中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！