javascript - 如何在 Javascript D3 的固定坐标 (x,y) 处显示文本

Question

我是 Java Script d3 库的新手，正在尝试使用 D3 JS 制作图表 我想在 (x,y) 的特定坐标处显示文本，但它显示在左上角，而不是根据我想要的位置.

请任何人帮助我如何在特定的 x,y 坐标处显示文本。

下面的代码在左上角显示文本(不根据 x,y 轴显示)但我想要在 (2,5) 坐标处

我们如何找出每条路径曲线中点的 [x,y] 坐标，我可以在其中显示任何文本。看这里Path curve

这是我的运行代码 jsfiddle

`

 var path0  = [{x: 1.0, y: 8.5},{x: 2.0, y: 5.0}, {x: 1, y: 1.5}];var path1 = [{x: 3, y: 8.5},{x: 4.0, y: 5.0}, {x: 3, y: 1.5}];
  var w = 1200,
      h = 850,
      p = 40,
      x = d3.scale.linear().domain([0, 10]).range([p, w - p]),
      y = d3.scale.linear().domain([0, 10]).range([h - p, p]);



  var line = d3.svg.line()
            .interpolate("cardinal")
            .x(function(d) { console.log(d);return x(d.x); })
            .y(function(d) { console.log(d); return y(d.y); });



  var vis = d3.select("body").append("svg:svg")
            .attr("width", w)
            .attr("height", h)
            .append("svg:g"); 

  var rules = vis.selectAll("g.rule")
              .data(x.ticks(10))
              .enter().append("svg:g")
              .attr("class", "rule"); 

  rules.append("svg:line")
        .attr("x1", x)
        .attr("x2", x)
        .attr("y1", p)
        .attr("y2", h - p - 1);

  rules.append("svg:line")
        .attr("class", function(d) { return d ? null : "axis"; })
        .attr("y1", y)
        .attr("y2", y)
        .attr("x1", p)
        .attr("x2", w - p + 1);

  rules.append("svg:text")
        .attr("x", x)
        .attr("y", h - p + 3)
        .attr("dy", ".71em")
        .attr("text-anchor", "middle")
        .text(x.tickFormat(10));

  rules.append("svg:text")
        .attr("y", y)
        .attr("x", p - 3)
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .text(y.tickFormat(10)); 

 vis.selectAll("path.path0")
      .data([0])
      .enter().append("svg:path")
      .attr("d", function(d) {  console.log(d);return line.tension(d)(path0); }) 
      .style("stroke","green");



  //it is showing text where I wanted at (241.6,425) coordinates but do not know why it is not taking (2,5) coordinates
  vis.append("text")
        .attr("y", 425)
        .attr("x",241.6)
        .attr("dy", 10)
        .attr("text-anchor", "middle")
        .text("test1"); 

 //it is showing at top left corner. 
        vis.append("text")
        .attr("x",2)
        .attr("y",5)
        .attr("text-anchor", "middle")
        .text("test"); 




  vis.selectAll("path.path1")
      .data([0])
      .enter().append("svg:path")
      .attr("d", function(d) {  console.log(d);return line.tension(d)(path1); })
      .style("stroke","green");

Answer 1

在设置位置时，您使用的是从左上角开始的基于像素的系统。

您所指的(2,5)元素只是x轴和y轴上的标签，没有任何其他含义。所以 D3 将使用 (2,5) 作为距左上角的像素距离...

注意:为避免出现问题，您甚至可以像此处那样使用图表维度的约数:

vis.append("text")
        .attr("x", (w / 2))             
        .attr("y", (h / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .text("test2");  

在这里 fiddle :http://jsfiddle.net/s2yn3b4p/

更新:要与使用以下方法创建的 x 轴和 y 轴上的标签对齐:

x = d3.scale.linear().domain([0, 10]).range([p, w - p]),
y = d3.scale.linear().domain([0, 10]).range([h - p, p]);

您可以使用:

.attr("y", 5*(h/10))
.attr("x", 2*(w/10))