2

I've used NVD3 to make a line chart, where the X axis is Age (30-75), and the Y axis is risk of a heart attack (0-100%), drawing a line showing the risk over the complete age-span of 30-75:

In the 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 >

In the JS:

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

I want to add a circle onto this line, showing the user's current age - say, 50:

In the 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
      });  

... but this bypasses the translation NVD3 makes of the age and risk data values into d3/SVG graph coordinates. How does one align the cx and cy coordinates of the circle, to the point on the linegraph that matches a specific age value?

EDIT: We're inching closer .. adding this at the bottom of the NVD3 section in the HTML above draws a circle that updates with the correct values in realtime:

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

... but the values are still not aligned with the line in the chart. Trying to bind this circle to the same values in the dataset is not working:

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

Any clues as to what we're missing?

EDIT2: And closer still ..

Capture XAxis value NVD3 Stacked Area Chart

Community
  • 1
  • 1

0 Answers0