d3의 임펄스 플롯

Question

나는 질량 스펙트럼으로 작업하고 d3, highcharts, nvd3 또는 다른 시각화 도구에서 입력 스펙트럼에 대한 동적 스펙트럼 뷰를 생성하려고합니다.

이

나는 위해 라인의 종류 찾고있다 : 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을 지원하지 않습니다.

나는이 중첩이 나를 위해 많은 일을 할 것이라고 생각한다. 이제 나는 나의 충동을 표현할 방법이 필요하다. 일반적으로

Answer 1

, 당신은 제대로 만들어 데이터를 분산 시리즈를 사용할 수 있습니다, 당신은 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] 
     ] 
    }] 
});