如何在 Java 脚本 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))

Answer 2

您可以通过两种方式完成，或者直接将 x 和 y 上的点作为文本属性给出

 svg.append("text")
    .attr("x", myXpoint)             
    .attr("y", myypoint)
    .attr("text-anchor", "middle")  
    .style("font-size", "16px") 
    .text("any text );

或者您可以添加一个组元素并在 svg 覆盖的任何点上转换该组元素，在这种情况下，您的 x , y 将为文本属性提供 0 0 并且是的，提供 x,y 也将占据位置该组元素的亲戚

var textwrapper = svg.append("svg:g")
 .attr("class", "mytext")
 .attr("transform", "translate(" + [x,y] + ")");

 textwrapper.append("text")
    .attr("x", 0)             
    .attr("y", 0)
    .attr("text-anchor", "middle")  
    .style("font-size", "16px") 
    .text("any text );

这里比第一个选项的优势是你可以根据你的要求更新和动画组元素（我们也可以用文本来做，但这种方式更流畅并且不影响文本元素属性）基于一些事件，比如鼠标悬停或信息框

如何在 Java 脚本 D3 中在 (x,y) 的固定坐标处显示文本

how to Show text at fixed coordinate of (x,y) in Java Script D3

javascript

d3.js