當超過10個數據對時，Chrome中的酒窩線條圖不能正確繪製

Question

我已經創建了一個jsfiddle，可以讓您看到我的問題。該問題只發生在Chrome中。 Safari，IE，FF的最新版本完美工作。這是一個已知的問題？有沒有修復？沒有酒窩的D3工作正常。任何關於工作的想法或知識都會很棒。

http://jsfiddle.net/ernieb0y/0ovteqr8/1/

`變種DATA1 = [{ 「距離」： 「31」， 「方差」：0.11}， { 「距離」： 「92」， 「方差」：0.38}， {」距離「：」153「，」方差「：0.84}， {」距離「：」214「，」方差「：1.55}， {」距離「：」276「，」方差「：2.34}， { 「距離」：「337」，「方差」：3.04}， {「距離」：「398」，「方差」：3.86}， {「距離」：「459」，「方差」：4.6}， {「distance」：「521」，「variance」：5.16}， {「distance」：「582」，「variance」：6.09}， ] var data2 = [{「distance」：「31」，「variance」：0.11}， {「distance」：「92」，「variance」：0.38}， {「distance」：「153」 「距離」：「276」，「方差」：2.34}， {「距離」：「337」，「0.84」， {「距離」：「214」，「方差」：1.55}， 方差「：3.04}， {」distance「：」398「，」variance「：3.86}， {」distance「：」459「，」variance「：4.6}， {」distance「：」521「， 「方差」：5.16}， { 「距離」： 「582」， 「方差」：6.09}， { 「距離」： 「643」， 「方差」：6.89}， ]

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

    var myChart = new dimple.chart(svg); 
    myChart.setBounds(90, 35, 480, 400) 
    xAxis = myChart.addMeasureAxis("x", "distance"); 
    yAxis = myChart.addMeasureAxis("y", "variance"); 
    xAxis.showGridlines = true; 
    yAxis.ticks = 5 
    xAxis.ticks = 5 
    s1 = myChart.addSeries(["distance","perf_1"], dimple.plot.line, [xAxis, yAxis]); 
    s1.data = data1 
    s1.lineMarkers = true; 
    s2 = myChart.addSeries(["distance","perf_2"], dimple.plot.line, [xAxis, yAxis]); 
    s2.data = data2 
    myChart.addLegend(90, 480, 330, 20, "left"); 
    myChart.draw();` 

Answer 1

問題不在於數據，而在於addSeries調用。我在這裏調整它們：

看到小提琴：http://jsfiddle.net/jose_jimenez/nvrekzd5/1/

當你傳遞一個數組[「距離」，「perf1」]，預計各是一列，它創造了傳奇的副作用。

如果你想擁有兩個類似軸的系列，你可以在你的數據集中添加一列（字段名稱perf，值'perf1'，'perf2'），然後它會給你想要的東西。

http://jsfiddle.net/jose_jimenez/nvrekzd5/2/

（調整到具有用於說明的目的略有不同的值）

var data1 = [{"perf": 'perf1', "distance":"31","variance":0.11}, 
    {"perf": 'perf1', "distance":"92","variance":0.38}, 
    {"perf": 'perf1', "distance":"153","variance":0.84}, 
    {"perf": 'perf2', "distance":"31","variance":0.12}, 
     {"perf": 'perf2', "distance":"94","variance":0.38}, 
     {"perf": 'perf2', "distance":"150","variance":0.87}, 
     ] 

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

    var myChart = new dimple.chart(svg); 
    myChart.setBounds(90, 35, 480, 400) 
    xAxis = myChart.addMeasureAxis("x", "distance"); 
    yAxis = myChart.addMeasureAxis("y", "variance"); 
    xAxis.showGridlines = true; 
    yAxis.ticks = 5 
    xAxis.ticks = 5 
    s1 = myChart.addSeries(["distance", 'perf'], dimple.plot.line, [xAxis, yAxis]); 
    s1.data = data1 
    s1.lineMarkers = true; 
    myChart.addLegend(90, 480, 330, 20, "left"); 
    myChart.draw();