Question

我使用NVD3制作折线图，其中X轴是年龄（30-75），Y轴是心脏病发作的风险（0-100％），绘制一条显示风险的线完整的年龄跨度为30-75：

在HTML中：

 <nvd3-line-chart
    data="riskchartData"
    id="riskPrediction"
    height="300"
    margin="{left:90,top:20,bottom:70,right:20}"
    yaxisLabel="My CHD Risk"
    xaxisLabel="Age"
    showXAxis="true"
    showYAxis="true"
    tooltips="true"
    interactive="true"
    showLegend="true"
    showControls="true"
    color="colorFunction()">
    <svg></svg>
  </nvd3-line-chart >

在JS中：

$scope.RiskChartRedraw = function(){
  risklines = predemo();
  $scope.yMaxFunction();
  $scope.riskchartData = [
    {
      "key": "My current risk",
      "area": false,
      "values": risklines[0],
      "color": "red",
    }
  ];
};

我想在此行上添加一个圆圈，显示用户的当前年龄 - 例如50：

在JS中：

$scope.age = 50; // user's current age 
$scope.risk =  .03; // percentile risk of heart attack at current age

 d3.select('#riskPrediction svg')
      .append('circle')
      //.data(circlerisk)
      .attr({
        fill: 'red',
        stroke: 'red',
        cx: $scope.age,
        cy: $scope.risk,
        r: 7
      });

...但是这会绕过NVD3将年龄和风险数据值转换为d3 / SVG图形坐标。 如何将圆圈的cx和cy坐标与线图上与特定年龄值匹配的点对齐？

修改我们正在靠近..在上面的HTML中，在NVD3部分的底部添加这个，绘制一个实时更新正确值的圆圈：

<svg>
   <circle cx="{{agecircle}}" cy="{{riskcircle}}" r="5.656854249492381" style="fill:black;"></circle>
</svg>

...但值仍未与图表中的行对齐。尝试将此圆绑定到数据集中的相同值不起作用：

<circle cx="function(d) { d.x = {{agecircle}}; return x;}" cy="function(d) { d.y = {{riskcircle}}; return y;}" r="8" style="fill:black;"></circle>

关于我们缺少什么的任何线索？

EDIT2： 离得更近了..

Capture XAxis value NVD3 Stacked Area Chart

在NVD3折线图上的某个点绘制一个圆

0 个答案: