Question

我是D3js的新手。我需要制作一个像（http://img59.imageshack.us/img59/3439/temp1a.png）的图表。现在我正在制作看起来像（http://imageshack.us/a/img441/3079/hvd2.jpg）的东西。如何连接点？也许还有其他一些关于图表的建议？

我的代码：

var width = 400,
height = 400,
radius = 320;

var width = 400,
height = 400,
radius = 320;

bdata = [{"value":10},
    {"value":10},
    {"value":20},
    {"value":10},
    {"value":10}];

tdata = [{"x":0.5, "y":10.5}];

var s = ([65]);

var color = d3.scale.ordinal()
.range(["#d2000e", "#ffce00", "#00a600", "#ffce00", "#d2000e"]);

var pie = d3.layout.pie()
    .value(function(d) { return d.value; })
    .sort(null)
    .startAngle(0)
.endAngle((Math.PI/2));

var arc = d3.svg.arc()
.innerRadius(radius - 26)
.outerRadius(radius - 20);

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.data([bdata])
  .append("g")
.attr("transform", "translate(40, 40)");

var path = svg.selectAll("path")
  .data(pie)
.enter().append("path")
  .attr("fill", function(d, i) { return color(i); })
  .attr("d", arc)
  .attr("transform", "translate(0," + 299.5 + ")");

var x = d3.scale.linear()
            .domain([0, 200])
            .range([0, 300]);

var y = d3.scale.linear()
            .domain([0, 20])
            .range([300, 0]);

var radius = d3.scale.linear()
            .domain([0, 9])
            .range([180, 240]);

var fill = d3.scale.linear()
            .domain([0, 9])
            .range(["red", "steelblue"]);

var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .ticks(4);

var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .ticks(4);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + 300 + ")")
  .call(xAxis)
.append("text")
  //.attr("transform")
  .attr("x", 315)
  .attr("y", 5)
  .attr("dx", ".71em")
  .style("text-anchor", "middle")
  .text("m3/hr");    

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("y", -10)
  .attr("dy", ".71em")
  .style("text-anchor", "middle")
  .style("color", "#222")
  .text("bar");

var circles = svg.selectAll("circle")
                .data(tdata)
                .enter()
                .append("circle");                  

var circleAttr = circles
            .attr("transform", "translate(0," + 290 + ")")
            .attr("cx", function (d) { return -x(d.x); })
            .attr("cy", function (d) { return -y(d.y); })
            .attr("r", 7);  

var g2 = svg.selectAll("circle")
.data(d3.range(0, 2))
.enter()
 .append("svg:g")

.attr("transform", "translate(0," + 300 + ")");


var circle = g2.selectAll("circle")
.attr("class", "secpoint")
.data(d3.range(1))
.enter()
.append("svg:circle")
    .attr("transform", function(d) { return "rotate(" + -s + ")"; })
.attr("cx", d3.scale.linear().domain([0, 1]).range([297, 297]))
.attr("r", 7)
.attr("stroke", "black")

Answer 1

我认为您希望以数据驱动的方式放置第二个圆圈（而不是依赖于变换），这样您以后可以在绘制线条时访问该点：

var theta = -0.2392*Math.PI
var rad = radius - 25;
var circle2 = {x: Math.cos(theta)*rad, y: Math.sin(theta)*rad}

那么你可以简单地画出这样的一行：

svg.append("line")
.attr("transform", "translate(0," + 290 + ")")
.attr({
  x1: -x(tdata[0].x),
  x2: circle2.x + 3,
  y1: -y(tdata[0].y),
  y2: circle2.y + 3
})
.style({
  stroke: "#000000"
})

这是一个实例 http://tributary.io/inlet/5808514

连接点的线

1 个答案: