d3 - 从x1轴到x2轴绘制圆弧以填充范围环

Question

问题

我想制作一个范围戒指。我希望用户能够从DOM上的几个小部件中动态选择，并在下面的图像中显示的轴上显示一个范围环。要做到这一点，我相信我需要绘制一条线并给它一个轻微的弯曲，将它从拦截连接到拦截。我对D3.js几乎是全新的，在D3.js上也不是很好，所以我已经拥有的代码可能是垃圾开始（我也对这些反馈持开放态度）。

的尝试

成功， 此时甚至无法在屏幕上绘制一条线。

我也不确定是否有更好的方法可以做到这一点，比如填写d3必须提供的饼图。

当前代码

    function launch ()
{

    // DATA 
    var data = [5,10,15,20,25,30,35,40,45,50,55,60,65,70];
    var data1 = [{"x1":0, "y1":10,
                 "x2":10, "y2":0}
                ];

    // VARIABLES
    var margin        = {top: 50, right: 50, bottom: 50, left: 50};
    var width         = 1000 - margin.left - margin.right;
    var height        = 800 - margin.top - margin.bottom;

    //SETUP Y
    var yScale        = d3.scale.linear()
        .domain([0,70])
        .range([0,width/2]);
    var yAxis         = d3.svg.axis()
        .scale(yScale)
        .ticks(7)
        .orient("top");
    var yMap = function(d) { return yScale(d);}; // data -> display

    // SETUP X
    var xScale        = d3.scale.linear()
        .domain([0,70])
        .range([0,width/2]);    
    var xAxis         = d3.svg.axis()
        .scale(xScale)
        .ticks(7)
        .orient("bottom");
    var xMap = function(d) { return xScale(d);}; // data -> display

    // setup fill color
    var cValue = function(d) { return d;};
    var color = d3.scale.category10();


    // BUILD THE CANVAS
    var canvas       = d3.select("#target")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // ADD AN X AXIS ELEMENT TO THE CANVAS
        canvas.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate("+width/2 + "," + height + ")rotate(-45)")
            .call(xAxis)
            .selectAll("text")
              .style("text-anchor", "middle")
              .attr("dx", "0")
              .attr("dy", "0")
              .attr("y", 10)
              .attr("x", 20)
              .attr("transform", "rotate(45)" );

    // ADD AN Y AXIS ELEMENT TO THE CANVAS
        canvas.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate("+width/2 + "," + height + ")rotate(-135)")
            .call(yAxis)
            .selectAll("text")
              .style("text-anchor", "middle")
              .attr("dx", "0")
              .attr("dy", "0")
              .attr("y", 10)
              .attr("x", -20)
              .attr("transform", "rotate(135)" );

      // draw dots
      canvas.append("g").selectAll(".dot")
          .data(data)
          .enter()
          .append("circle")
          .attr("class", "dot")
          .attr("r", 3.5)
          .attr("cx", xMap)
          .attr("cy", yMap)
          .attr("transform", "translate("+width/2 + "," + height + ")rotate(225)")
          .style("fill", function(d) { return color(cValue(d));})
          .on("mouseover", function(d)
          {
            d3.select(this).style("fill", "black");
            d3.select(this).transition().attr("r", 20);

          })
          .on("mouseout", function(d)
          {
            d3.select(this).style("fill", function(d) { return color(cValue(d));})
            d3.select(this).transition().attr("r", 3.5);
          })


          var data1 = [{x:10, y:20}, //Point 1
                      {x:100, y:100},
                      {x:10, y:200}];

          var line = d3.svg.line()
              .x(function(d){ return d.x})
              .y(function(d){ return d.y});

      canvas.append("g").selectAll(".lines")
        .data([data1])
        .enter()
          .append("path")
          .attr("d" )

// draw dots
      canvas.selectAll(".dot")
          .data([data1])
              .enter()
                .append("line")
                .attr("x1", function(d){return d.x1;})
                .attr("x2", function(d){return d.x2;})
                .attr("y1", function(d){return d.y1;})
                .attr("y2", function(d){return d.y2;})
                .attr("fill","none")
                .attr("stroke", "red")
                .attr("stroke-width", 5);  


}

当前情节

目标情节