0

I got an area that generated by the following functions 

        area = d3.svg.area.radial().interpolate('cardinal-closed').angle(function (d) {
      return angle(d.index);
    }).innerRadius(function (d) {
      return radius(d.y0);
    }).outerRadius(function (d) {
      return radius(d.y0 + d.y);
    });

and I want to put a point(circle) on my data points, this is what I did:

      makePoints = function(){
    points = svg.selectAll(".point").data(layers[0].values);
    points.enter().append("circle")
      .attr("stroke", z(0))
      .attr("fill", function(d, i) { return z(0) })
      .attr("r", function(d, i) { return 3 });

    points.exit().remove();
  };


  updatePoints = function() {
    points.data(layers[0].values);
    points.transition().attr("transform",
      function (d, i) {
        var vals = area([d]).split(',');
        return "translate(" + vals[0].split('M')[1] + "," + vals[1].split('M')[0] + ")";
      }
    );
  };

It works, but I think my code is crappy, how can I get the translate data without parsing the area result?

Chen Kinnrot
  • 20,609
  • 17
  • 79
  • 141
  • Use the original data that you used to generate the area. – Lars Kotthoff Jun 25 '15 at 16:15
  • @LarsKotthoff Can you farther explain – Chen Kinnrot Jun 26 '15 at 06:56
  • See for example [this question](https://stackoverflow.com/questions/14040297/points-on-line-in-d3-js) -- the original data determines the shape of the area and the position of the points, so you can use it together with the scales to determine the position of the points. – Lars Kotthoff Jun 26 '15 at 16:27

0 Answers0