값을 기존 xScale로 변환

Question

vnd3에 줄을 쓰고, nvd3 좌표계로 변환하는 방법, 축에 대한 내 값을 변환 할 수있는 경우 변환 값을 반환하여 그리면됩니다. 'g'를 사용하여 번역을 사용하여 선을 그립니다. 예를 들어

,

난 그냥 값이 18 가정, 그래서 어떻게 생각 exising axis.The 솔루션 라인을 작성, 파란색 라인을 추가 할 수있다 : 는 엑스 스케일 컴퓨팅 새 값을 차트 도메인으로 변환하려면 'g'를 사용하여 번역하십시오.

맞습니까?

Answer 1

nvd3 모델을 만들 때 모델에서 다양한 기능을 호출하여 축척, 축 및 기타 구성 가능한 매개 변수를 가져올 수 있습니다.

다소 큰 API 표면이 문서화 된 곳을 찾을 수 없습니다. 그러나 소스 코드는 읽기 쉽고 해결하기 쉽습니다. 예를 들어

의 lineChart model는 다음과 같은 API가 있습니다

//============================================================ 
    // Expose Public Variables 
    //------------------------------------------------------------ 

    // expose chart's sub-components 
    chart.dispatch = dispatch; 
    chart.lines = lines; 
    chart.legend = legend; 
    chart.xAxis = xAxis; 
    chart.yAxis = yAxis; 
    chart.interactiveLayer = interactiveLayer; 

    d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'xRange', 'yRange' 
    , 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'useVoronoi','id', 'interpolate'); 

    chart.options = nv.utils.optionsFunc.bind(chart); 

    chart.margin = function(_) { ... } 
    chart.width = function(_) { ... } 
    chart.height = function(_) { ... } 
    chart.color = function(_) { ... } 

    chart.showLegend = function(_) { ... } 
    chart.showXAxis = function(_) { ... } 
    chart.showYAxis = function(_) { ... } 
    chart.rightAlignYAxis = function(_) { ... } 
    chart.useInteractiveGuideline = function(_) { ... } 
    chart.tooltips = function(_) { ... } 
    chart.tooltipContent = function(_) { ... } 
    chart.state = function(_) { ... } 
    chart.defaultState = function(_) { ... } 
    chart.noData = function(_) { ... } 

    chart.transitionDuration = function(_) { ... } 

이러한 기능의 대부분은 자명하다.

xScale 및 margins에 액세스하려면 각각 model.xScale() 및 model.margin() 함수를 호출하면됩니다. 그런 다음 제안한대로 line으로 g을 만들고 그래프에 배치하십시오.