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 });

结果不是我所期望的:

然后我将 interpolate("basis") 更改为 interpolate("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屋！