如何使用“d3.js”库在圆线图中放置圆圈（点）？

Question

我想使用d3.js制作折线图，其中我想将圆圈放在数据的位置。但是圆圈放在折线图中的错误位置。我该如何解决这个问题？

我在Angular工作。基本数据集看起来像

{
          type: 'Advanced',
          wcpm: 40,
          date: '11-25-2019',
          comment: [
            'Lorem Ipsum Lorem Ipsum Lorem 1',
            'Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 2'
          ]
 }

输出图像链接：https://ibb.co/pwRdXjx

其中第一个圆圈应放置在1月25日，但它放在错误的位置。

class AppComponent implements OnInit {
 title = 'chart';
 margin = { top: 50, right: 50, bottom: 50, left: 50 };
 width = 1200 - this.margin.left - this.margin.right;
 height = 700 - this.margin.top - this.margin.bottom;
 svg: any;
 xScale: any;
 yScale: any;
 line: any;
 toolTipDiv: any;
ngOnInit() {

// XAXIS
this.xScale = d3.scaleBand()
  .domain(this.dataset[0].fluencyData.map((data) => {
    return new Date(data.date);
  }))
  .range([0, this.width]);

// YAXIS
this.yScale = d3.scaleLinear()
  .domain([0, 110])
  .range([this.height, 0]);

// Line Generator
this.line = d3.line()
  .x((d) => this.xScale(new Date(d.date)))
  .y((d) => this.yScale(d.wcpm));
// .curve(d3.curveMonotoneX);

// Add SVG to Div
this.svg = d3.select('#displayChart').append('svg')
  .attr('width', this.width + this.margin.left + this.margin.right)
  .attr('height', this.height + this.margin.top + this.margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

// Define the div for the tooltip
this.toolTipDiv = d3.select('#displayChart').append('div')
  .attr('class', 'tooltip')
  .style('opacity', 0);

// Append XAXIS to the SVG
this.svg.append('g')
  .attr('class', 'xAxis')
  .attr('transform', 'translate(0,' + this.height + ')')
  .call(d3.axisBottom(this.xScale).tickSizeOuter(0).tickFormat(d3.timeFormat('%b %d')));

// Append YAXIS to SVG
this.svg.append('g')
  .attr('class', 'yAxis')
  .call(d3.axisLeft(this.yScale).tickSize(-this.width)
  );

// Make a Path for Dataset
this.svg.append('path')
  .datum(this.dataset[0].fluencyData)
  .attr('class', 'line')
  .attr('d', this.line);

// Text Heading of DATE in chart
this.svg.append('text')
  .attr('transform', 'translate(' + (-20) + ',' + (this.height + 13) + ')')
  .attr('dy', '.35em')
  .attr('class', ' xAxis')
  .text('Date');

// Append Circles in chart with different Colors
this.appendCircles();
}

appendCircles() {
  this.svg.selectAll('.developing')
  .data(this.dataset[0].fluencyData)
  .enter().append('circle')
  .attr('class', (d) => d.type)
  .attr('cx', (d) => this.xScale(new Date(d.date)))
  .attr('cy', (d) => this.yScale(d.wcpm))
  .attr('r', 5)
  .on('mouseover', (d) => {
    this.toolTipDiv.transition()
      .duration(200)
      .style('opacity', .9);
    this.toolTipDiv.html(d.wcpm + '<br/>' + d.type + '<br/>' + d.date)
      .style('left', (d3.event.pageX - 50) + 'px')
      .style('top', (d3.event.pageY - 50) + 'px');
  })
  .on('mouseout', () => {
    this.toolTipDiv.transition()
      .duration(500)
      .style('opacity', 0);
  });
}
}

Answer 1

带尺度预期每个数据项用具有宽度的东西表示，例如条形图中的条。该元素的缩放空间（带）的宽度是从xBandScale(value)到xBandScale(value) + xBandScale.bandwidth()。这很方便，因为它允许您将矩形的x值设置为xBandScale(value)，将宽度设置为xBandScale.bandwidth()。

但是如果你定位圆圈，你希望它们位于这个空间中间的中心位置。你用xScale(value)定位你的分数，是乐队的左手边：

.attr("cx", function(d) { return xScale(d.someProperty) + xScale.bandwidth()/2 })

轴刻度是偏移的，因为它们预测了带的宽度，毕竟我们正在将带刻度传递给轴生成器。

是的，你可以用你的圈子定位：

d3.scalePoint

这会将圆圈放在乐队的中间 - 这会使您的圆圈与您的轴刻度对齐。但是，你的线不会从垂直轴开始，这并不是乐队音阶的预期目的，即使它有效。

相反，我们可以尝试 - 这也是一个序数尺度，类似于乐队规模。文档声明：“点标度通常用于具有序数或分类维度的散点图。”如果您的物体没有宽度（或更准确地说，位于带的中间），它们是理想的选择。

通过这个，我们得到一个看起来像的图形（使用与上面相同的数据和结构）：

xScale.step()

请注意，点之间的间距是

this.xScale = d3.scaleBand()
  .domain(this.dataset[0].fluencyData.map((data) => {
    return new Date(data.date);
  }))
  .range([this.margin.left, this.width]);

，轴刻度已移动（同样，最后一步超过轴线 - 它仅用于说明，轴终止于d）。

最后，如果我们有一个表示时间或其他一些连续数量的轴，我们可以使用d3中的任何连续标度而不是顺序标度，这通常是更可取的。

为简单起见，我假设没有填充来保持图像更容易阅读

Answer 2

您的SVG中剩余边距为50，但xScale范围从0开始。这就是为什么所有内容都向左移动的原因。您的xScale范围应从您的边距开始，并以svg宽度结束。

qazxswpoi