d3.js中的点 [英] points on line in d3.js

问题描述

我在d3.js中创建一个折线图如下：

I'm creating a line chart in d3.js like this:

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });

然后我想在行数据点上加上点，如下：

I then want to put dots on the line data points like this:

var points = svg.selectAll(".point")
        .data(cities1[0].values)
      .enter().append("svg:circle")
         .attr("stroke", "black")
         .attr("fill", function(d, i) { return "black" })
         .attr("cx", function(d, i) { return x(d.date) })
         .attr("cy", function(d, i) { return y(d.temperature) })
         .attr("r", function(d, i) { return 3 });

结果不是我预期的结果：

The result is not what I expect:

然后我更改interpolate（basis）来插值（cardinal）并获得我想要的：

I then change interpolate("basis") to interpolate("cardinal") and get what I want:

为什么我使用基础错误的结果？如何用基础绘制准确的点？

Why did I got the wrong result with basis? How can I draw the accurate points with basis too?

编辑：一个类似的（未回答的）问题。请查看此jsfiddle 。它只有在将插值从基本模式更改为基本（或其他）模式时才有效。但Cardinal有一个问题，它不尊重图的最大高度。我正在寻找的是解释为什么一些插值模式阻止把点放在正确的地方（为什么cardinal不尊重最大高度）。

A similar (unanswered) question. Check out this jsfiddle. It will only work if changing the interpolate from basis to cardinal (or other) mode. But Cardinal has a problem that it does not respect the max height of the graph. What I'm looking for is an explanation on why some interpolation modes prevent from putting the points in the right place (and why cardinal does not respect max height).

推荐答案

这是不幸的是基础插值的属性 - 线不一定通过点。没有办法修复这个。除非你绝对需要这个插值，只要坚持一个让你正确的点。

This is unfortunately a property of the "basis" interpolation -- the line doesn't necessarily run through the points. There's no way of "fixing" this. Unless you absolutely need this particular interpolation, just stick with one that allows you to get the points right.

你可以实现一个自定义插值，让你访问的点线穿过并相应地添加圆。这将需要对d3和线插补器如何工作的一些深入的了解。

You could implement a custom interpolation that gives you access to the points the line runs through and add circles accordingly. This will require a somewhat in-depth knowledge of how d3 and line interpolators work though.

这篇关于d3.js中的点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！