d3.js - 带复合轴的 Dimple.js 折线图，系列上的点之间没有链接

Question

我一直在玩新发布的 version 2.0.0我正在尝试复制 the composite axis example使用一些简单的民意调查数据 - 针对单个 Y 轴的 3 个系列(是，否，不确定)。

我显然在某处犯了一个基本错误......基本原则是你定义一个 y 轴然后每次你想在另一组数据上分层时将其作为引用传递，但它似乎没有将它们视为三个不同的系列(除了在连接几个相同但不相邻的值的情况下，点之间没有线，例如 2002 年和 2004 年的“否”30％，尽管它们之间有不同的值)。

此外，根据注释掉的行，如果我尝试将 x 轴切换为时间，则会收到 D3 错误。

JSFiddle live example

pollData = [
    { Year : 2001, Yes: 50, No: 40, Unsure: 10 },
    { Year : 2002, Yes: 60, No: 30, Unsure: 10 },
    { Year : 2003, Yes: 65, No: 25, Unsure: 5 },
    { Year : 2004, Yes: 75, No: 30, Unsure: 4 },
    { Year : 2005, Yes: 80, No: 10, Unsure: 5 }
];

var svg = dimple.newSvg("#chartContainer", 590, 400);

var myChart = new dimple.chart(svg, pollData);

myChart.setBounds(75, 30, 490, 330)

// Why won't a time axis working...? ("undefined is not a function" in D3)
// var dateAxis = myChart.addTimeAxis("x", "Year", "%Y");

var dateAxis = myChart.addCategoryAxis("x", "Year");
dateAxis.addOrderRule("Year");

var yesAxis         = myChart.addMeasureAxis("y", "Yes");
var noAxis          = myChart.addMeasureAxis(yesAxis, "No");
var unsureAxis      = myChart.addMeasureAxis(yesAxis, "Unsure");

myChart.addSeries("Yes", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("No", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("Unsure", dimple.plot.line, [dateAxis, unsureAxis]);

yesAxis.title = '%';

myChart.draw();

Answer 1

这里的问题不是您使用正确的复合轴。这是系列定义。 addSeries 的第一个参数要么采用维度进行分解，要么采用不在数据中的字段作为标签。这种方法的唯一限制是您不能通过数据中的维度名称来标记您的系列。在这种情况下，例如第一个系列(它适用于所有系列)按"is"分类，对于线系列意味着它尝试为每个"is"值画一条线，这意味着每行 1 行，因此所有单个未连接点。解决方法是将您的线路命名为不同的名称。例如:

myChart.addSeries("Y", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("N", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("U", dimple.plot.line, [dateAxis, unsureAxis]);

这是您更新的 fiddle :http://jsfiddle.net/RawyW/2/

如果您希望名称看起来匹配，您只需在系列名称后添加一个尾随空格即可:

myChart.addSeries("Yes ", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("No ", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("Unsure ", dimple.plot.line, [dateAxis, unsureAxis]);

这也行