nvd3 multiBarChart x 축을 따른 선

멀티 바둑판 식의 x 축을 따라 여러 값이있는 선을 추가해야합니다. 내가 전환하면 기존 기능이 중단되어 multiChart 또는 linePlusBarChart와 같은 다른 nvd3 컨트롤을 사용할 수 없습니다.nvd3 multiBarChart x 축을 따른 선

다음 코드와 피들은 내가 지금까지 가지고있는 것을 보여줍니다.

var limits = [[60,166990904656],[300,154990904656],[500,142990904656]]; 

var lineFunction = d3.svg.line() 
    .x(function(d) { return d[0] }) 
    .y(function(d) { 
    d = d[1]/1000000000; 
    return d  
}).interpolate('step-after'); 

//The line SVG Path we draw 
d3.select("#chart svg") 
    .append("path") 
    .attr("d", lineFunction(limits)) 
    .attr("stroke", "red") 
    .attr("stroke-width", 1) 
    .attr("fill", "none");

https://jsfiddle.net/s2vemzht/11/

나는 3 문제에 직면하고있다 : 첫째 줄의 x 축 위치입니다. 순간에 나는이 값을 제한 배열에 하드 코드했습니다. 왜냐하면 다음 막대가 시작되는 위치를 기반으로 동적으로 위치를 지정하는 방법이 확실하지 않기 때문입니다.

두 번째 문제는 데이터 배열의 다른 값과 관련된 한계 값입니다. 그것은 정확하게 위치하지 않는 것 같습니다.

세 번째 문제는 limits 배열에 3 개의 값이 있어도 세 번째 막대를 그리지 않는 선과 관련된 것입니다. 보간 속성을 변경하려고했지만 여전히 문제가 있습니다.

본인은 Y와 X 축을 기준으로 특정 지점과 위치에서 막대 위에 선을 그려 그것을 알아 내기 위해 관리

출처

2017-12-05 grimmus

1)'chart.height' 그렇지 않으면 당신의 x 축이 응답에 대한 – ksav

감사 중단되고, height''과 동일 할 수 없습니다. x 축은 그 순간에 잘리는 것처럼 보이지 않습니다. – grimmus

정확히 원하는 화면을 제공 할 수 있습니까? – sandyJoshi

:-) 모든 질문에 대한 사과 그래서 D3와 초보자를

저울입니다

  var yValueScale = chart.yAxis.scale(), 
       yValue = 0, 
       xValueScale = chart.xAxis.scale(), 
       g = d3.select("#chart svg .nvd3"); 

     for(var i=0;i<limits.length;i++){ 
     g.append("line") 
      .attr("class","limit-line") 
      .attr("x1", xValueScale(d3.time.format('%b-%d')(new Date(limits[i][0])))) 
      .attr("y1", yValueScale(limits[i][1]/ 1000000000)) 
      .attr("x2", xValueScale(d3.time.format('%b-%d')(new Date(limits[i][0]))) + parseInt(d3.select("#chart svg .nv-bar").attr("width"))) 
      .attr("y2", yValueScale(limits[i][1]/ 1000000000)) 
      ;  
     }

https://jsfiddle.net/s2vemzht/25/

출처

2017-12-18 15:46:10 grimmus

nvd3 multiBarChart x 축을 따른 선

답변

관련 문제