Как нарисовать горизонтальную линию по оси Y в столбце диаграммы d3? - PullRequest
Новая
       23

Как нарисовать горизонтальную линию по оси Y в столбце диаграммы d3?

0 голосов
/ 01 сентября 2018

У меня есть диаграмма столбца d3 в моем угловом приложении 6, и я хочу нарисовать линии по оси y для каждой метки по оси y. Я хочу, чтобы линии были такими:

enter image description here

Я не знаю, как нарисовать эти светло-серые линии!

вот мои коды от d3: 

createChart() {
const element = this.chartContainer.nativeElement;
this.width = element.offsetWidth - this.margin.left - this.margin.right;
this.height = element.offsetHeight - this.margin.top - this.margin.bottom;
const svg = d3.select(element).append('svg')
  .attr('width', element.offsetWidth)
  .attr('height', element.offsetHeight);

// chart plot area
this.chart = svg.append('g')
  .attr('class', 'bars')
  .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);

// define X & Y domains
const xDomain = this.data.map(d => d[0]);
const yDomain = [10000, d3.max(this.data, d => d[1])];

// create scales
this.xScale = d3.scaleBand().padding(0.6).domain(xDomain).rangeRound([0, this.width]);
this.yScale = d3.scaleLinear().domain(yDomain).range([this.height, 0]);

// bar colors
this.colors = d3.scaleLinear().domain([0, this.data.length]).range(<any[]>['#00a0e9', '#00a0e9']);

// x & y axis
this.xAxis = svg.append('g')
  .attr('class', 'axis axis-x')
  .attr('transform', `translate(${this.margin.left}, ${this.margin.top + this.height})`)
  .attr("stroke", "#777777")
  .attr("stroke-width", 0.5)
  .attr("fill", "none")
  .call(d3.axisBottom(this.xScale));
this.yAxis = svg.append('g')
  .attr('class', 'axis axis-y')
  .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
  .attr("stroke", "#777777")
  .attr("stroke-width", 0.5)
  .attr("fill", "none")
  .call(d3.axisLeft(this.yScale));
}

** Обновление =>

Я добавил новую конфигурацию под осью Y, она работает немного хорошо, но толщина линий не одинакова, и другая проблема заключается в том, что у меня есть значения 120000 и 122000 как два максимальных значения y, но на графике нарисована линия для оба из них. следует рисовать только за 120000 

this.yAxis = svg.append('g')
  .attr('class', 'axis axis-y')
  .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
  .attr("stroke", "#777777")
  .attr("stroke-width", 0.5)
  .attr("fill", "none")
  .call(d3.axisLeft(this.yScale));

svg.append("g")
  .attr("class", "grid")
  .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
  .attr("stroke-width", 0.1)
  .attr("fill", "none")
  .call(d3.axisLeft(this.yScale)
          .tickSize(-this.width)
          .tickFormat("")

  );

enter image description here

1 Ответ

0 голосов
/ 01 сентября 2018

Однажды я нашел этот фрагмент: нарисуйте вторую версию оси Y 

  g.append("g")
      .attr("class", "grid")
      .call(d3.axisLeft(y)
              .tickSize(-width)
              .tickFormat("")
      );

И вам нужно немного CSS для стилизации линий 

.grid line {stroke: lightgrey;stroke-opacity: 0.7;shape-rendering: crispEdges;}
.grid path {stroke-width: 0;}

Если вам нужны только линии сетки, но не ось, вы можете использовать axis.tickSizeInner ([размер])

...