Question

我在d3中绘制了x轴和y轴。

  svg.append('line')
      .style('stroke', 'black')
      .attr('x1', 5)
      .attr('y1', 5)
      .attr('x2', 20)
      .attr('y2', 20);

然后我想在这个网格中的2个点之间画一条线。

var gulp = require('gulp');
var clip = require('gulp-clip-empty-files');

gulp.task('default', function () {
    return gulp.src('src/*.scss')
        .pipe(clip())
        .pipe(gulp.dest('dist'));
});

以下是结果的jsbin。

因此，不在网格坐标（5,5）和（20,20）之间绘制线条。

如何将线放在我创建的网格坐标上？

Answer 1

设置轴时，您正在使用xScale和yScale。除了在内部用于生成刻度和刻度标签之外，这些刻度将提供SVG坐标（刻度范围）与网格使用的坐标（刻度域）之间的简单转换方式，即数据值。

要绘制线条，您还需要将比例应用于数据值：

svg.append('line')
    .style('stroke', 'black')
    .attr('x1', xScale(5))
    .attr('y1', yScale(5))
    .attr('x2', xScale(20))
    .attr('y2', yScale(20));

在d3中的2个坐标之间绘制一条直线

1 个答案: