d3中的脈衝圖

我使用質譜圖並希望爲d3，highcharts，nvd3或其他一些可視化工具生成輸入光譜的動態光譜視圖。d3中的脈衝圖

這行的類型我在尋找：Impulse Plot example from Matlab

我的數據是相當複雜的（好像是這個問題的嵌入式陣列... How to draw line charts with complex data structures in d3）和像我是在我不能讓衝動：

var points = svg.selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("line") 
    .attr("x1", function (d, i) { 
    return xScale(d[0]); 
}) 
    .attr("y1", function (d) { 
    return yScale(d[1]); 
}) 
    .attr("x2", function (d) { 
    return xScale(d[0]); 
}) 
    .attr("y2", function (d) { 
    return yScale(0); 
}) 
    .attr("class", "impulse");

事實證明，我不能拉嵌入式陣列到.data水平，所以我必須寫這段代碼以不同的方式。我試圖跟隨鏈接的問題，並做到：

var line = d3.svg.line().x(function(d) { return xscale(d.timestamp); }) 
         .y(function(d) { return yscale(d.value); });

然而，d3.svg.line()不支持x1,x2,y1,y2我所需要的。

我覺得這個嵌套對我來說會做很多事情，現在，我只需要一種方法來呈現我的衝動。

來源

2014-02-21 Ryanmt

這樣做將有每點單線最簡單的方法（從軸開始到結束點），並用線結束標記。 –

@LarsKotthoff你有沒有D3繪圖線svg課程的經驗？除了我在這裏引用的另外一個訪問例程嗎？ – Ryanmt

不知道你的意思是「行svg類」，但SVG行要求設置四個座標，所以這是你必須做的。還有一些更一般的路徑，但在這種情況下使用起來並不容易。 –

一般來說，要實現類似的圖像，你在Highcharts發佈後，您可以使用分散系列創建正確的數據：http://jsfiddle.net/Yrygy/94/

chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'scatter' 
    }, 
    plotOptions: { 
     scatter: { 
      lineWidth: 1, 
      states: { 
       hover: { 
        lineWidth: 1 
       } 
      } 
     } 
    }, 
    series: [{ 
     data: [ 
      {x: 0, y: 0, marker: { enabled: false } }, // bottom point 
      [0, 51.6],         // top point 
      null,          // break line point 
      {x: 1, y: 0, marker: { enabled: false } }, 
      [1, 59.0], 
      null, 
      {x: 2, y: 0, marker: { enabled: false } }, 
      [2, 49.2] 
     ] 
    }] 
});

來源

2014-02-21 12:16:52

回答

相關問題