多个 D3 图表，两个轴，无类别答案

【问题标题】：Multiple D3 Graphs, Two Axis', No Category's多个 D3 图表，两个轴，无类别
【发布时间】：2015-01-19 20:48:38
【问题描述】：

我正在使用dimple js，并试图让两个对象变量在绘图时使用相同的轴。我提供了示例数据集，它不包括类别，只是测试的名称（x 轴）和需要单独绘制的两个值。我正在考虑一个非常骇人听闻的解决方案，即复制所有数据并为每个集合添加单独的类别。如果您有更清洁的解决方案，我将不胜感激。

测试数据

var data=[
   {name:"test 1",firstAccuracy:33,accuracy:50},
   {name:"test 2",firstAccuracy:38,accuracy:60},
   {name:"test 3",firstAccuracy:45,accuracy:50},
   {name:"test 4",firstAccuracy:55,accuracy:80},
   {name:"test 5",firstAccuracy:52,accuracy:72},
   {name:"test 6",firstAccuracy:60,accuracy:70},
   {name:"test 7",firstAccuracy:54,accuracy:82},
   {name:"test 8",firstAccuracy:60,accuracy:60},
   {name:"test 9",firstAccuracy:70,accuracy:85}
]

相关的Javascript

function drawGraph(){
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 505, 305);
    var x = myChart.addCategoryAxis("x", "name");
    var y1 = myChart.addMeasureAxis("y", "accuracy");
    var y2 = myChart.addMeasureAxis("y", "firstAccuracy");
    var s1 = myChart.addSeries("Result Accuracy", dimple.plot.line,[x,y1]);
    var s2 = myChart.addSeries("First Result Accuracy", dimple.plot.line,[x,y2]);
    myChart.draw();

}

目前的样子

我的目标

【问题讨论】：

标签： javascript jquery d3.js graph

【解决方案1】：

我认为真正的答案是让 data 包含两组 result 和 firstResult 并带有一个系列参数来区分它们，有点像这个例子。 http://dimplejs.org/examples_viewer.html?id=lines_horizontal_stacked

但是，如果重新格式化 data 对象是不可能的，您可以执行以下操作：

var svg = dimple.newSvg("#chartContainer", 590, 400);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "name");
var y1 = myChart.addMeasureAxis("y", "accuracy");
y2 = Object.create(y1);
y2.measure = "firstAccuracy";
var s1 = myChart.addSeries("Result Accuracy", dimple.plot.line,[x,y1]);
var s2 = myChart.addSeries("First Result Accuracy", dimple.plot.line,[x,y2]);

myChart.draw();

这在 FireFox 中对我有用，尽管我认为像这样使用 Object.create 非常麻烦。

【讨论】：