javascript - d3 line/circle chart

Question

Does anyone know how to create a line/circle chart that has lines extended to different quadrants that represent different data points using JavaScript SVG?

The image below demonstrates what I'm seeking.

Started out by mapping a dougnut chart with placeholders where the line(s) could ricochet off.

//latest fiddle

http://jsfiddle.net/Qh9X5/10152/

The next step is to plot a line to bounce off the markers.

  var slice = svg.select(".slices").selectAll("path.slice")
    .data(pie(data));

  slice.enter()
    .insert("path")
    .attr('fill', function(d, i) {
      console.log("d", d);
      return colores_google(i);
    })
    .attr("class", "slice");

  slice
    .transition().duration(1000)
    .attrTween("d", function(d) {
      this._current = this._current || d;
      var interpolate = d3.interpolate(this._current, d);
      this._current = interpolate(0);
      return function(t) {
        return arc(interpolate(t));
      };
    })

  slice.exit()
    .remove();




  var placeholders = svg.select(".placeholders").selectAll("circle.placeholder")
    .data(pie(data));

  placeholders.enter()
    .insert("circle")
    .style("fill", function(d) {
      return "white";
    })
    .attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("r", "3")
    .attr("class", function(d) {
      return "placeholder " + d.data.group;
    });

  placeholders
    .transition().duration(1000)

  placeholders.exit()
    .remove();

  var gapplaceholders = svg.select(".placeholders").selectAll("circle.placeholder.gap");

  gapplaceholders.remove();

Answer 1

I've managed to start plotting multiple lines against the nodes of this doughnut chart.

http://jsfiddle.net/Qh9X5/10208/

  var slice = svg.select(".slices").selectAll("path.slice")
    .data(pie(data));

  slice.enter()
    .insert("path")
    .attr('fill', function(d, i) {
      return colores_google(i);
    })
    .attr("class", "slice");

  slice
    .transition().duration(1000)
    .attrTween("d", function(d) {
      this._current = this._current || d;
      var interpolate = d3.interpolate(this._current, d);
      this._current = interpolate(0);
      return function(t) {
        return arc(interpolate(t));
      };
    })

  slice.exit()
    .remove();



  var placeholders = svg.select(".placeholders").selectAll("circle.placeholder")
    .data(pie(data));

  placeholders.enter()
    .insert("circle")
    .style("fill", function(d) {
      return "white";
    })
    .attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("x", function(d) {
      return arc.centroid(d)[0];
    })
    .attr("y", function(d) {
      return arc.centroid(d)[1];
    })
    .attr("r", "3")
    .attr("id", function(d) {
      return "p" + d.data.id;
    })
    .attr("class", function(d) {
      return "placeholder " + d.data.group;
    });

  placeholders
    .transition().duration(1000)

  placeholders.exit()
    .remove();



  var labelholders = svg.select(".labelholders").selectAll("text.labelholder")
    .data(pie(data));

  labelholders.enter()
    .insert("text")
    .attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("dy", -5)
    .text(function(d) {
      return d.data.id;
    })
    .attr("class", function(d) {
      return "labelholder " + d.data.group;
    });

  labelholders
    .transition().duration(1000)

  labelholders.exit()
    .remove();




  var gapplaceholders = svg.select(".placeholders").selectAll("circle.placeholder.gap");

  gapplaceholders.remove();


var lineColors = ["e2d7c7",
    "d7b093",
    "c04830",
    "fffcef",
    "4aaba2",
    "c94f42",
    "52b0a2"
  ];


  var lineData = [{
      group: 1,
      plots: [21, 22, 18, 1]
    }, {
      group: 2,
      plots: [20, 23, 17, 9]
    }, {
      group: 3,
      plots: [21, 24, 16, 15]
    }, {
      group: 3,
      plots: [19, 23, 16, 0]
    }, {
      group: 5,
      plots: [19, 24, 18, 6]
    }, {
      group: 6,
      plots: [19, 24, 17, 14]
    }, {
      group: 3,
      plots: [20, 23, 16, 2]
    }, {
      group: 5,
      plots: [19, 23, 16, 4]
    }

  ]



  $.each(lineData, function(index, value) {

    var coords = [];

    var group = value.group;

    $.each(value.plots, function(i, v) {
      $("#p" + v).each(function() {
        var x = $(this).attr("x");
        var y = $(this).attr("y");

        var obj = {
          "x": x,
          "y": y
        };
        coords.push(obj);
      });
    });


    var first = {
      "x": 5 * index,
      "y": radius - 35
    };
    coords.push(first);

    var first = {
      "x": 5 * index,
      "y": radius + 200
    };
    coords.push(first);

    var maxLeng = coords.length - 2;

    $.each(coords, function(i, v) {

      var line = svg.append("line")
        .style("stroke", function(d) {
          return lineColors[group];
        })
        .attr("x1", coords[i]["x"])
        .attr("y1", coords[i]["y"])
        .attr("x2", coords[i + 1]["x"])
        .attr("y2", coords[i + 1]["y"]);

      if (i == maxLeng) {
        return false;
      }
    });

  });