Question

我正在使用单击事件将数据记录到控制台，但是我想在一个单独的框中显示此数据（已创建）。有人对此有任何建议吗？还是有一个像样的图书馆可以帮助我实现这一目标？

欢呼

 var circles = svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", 7)
    .attr("cx", function(d) { return xScale(d[1]); })
    .attr("cy", function(d) { return yScale(d[2]); })
    .on('click', function(d, i) {
        console.log("click", d[0]);
    })
    .attr("fill", function(d) {
        var result = null;

        if (data.indexOf(d) >= 0) {
            result = colours(d);
        } else {
            result = "white";
        }
        return result;               
    });

var textBox = svg.append("rect")
    .attr("x", 5)
    .attr("y", 385)
    .attr("height", 150)
    .attr("width", 509)
    .style("stroke", bordercolor)
    .style("fill", "none")
    .style("stroke-width", border);

Answer 1

在systemctl stop docker侦听器中，只需选择您的"click"，或使用您已经拥有的选择：

box

这是一个简单的演示，请单击圆圈：

circles.on("click", function(d) {
    selection.append("text")
    //etc...
})

var svg = d3.select("svg");
var circle = svg.append("circle")
  .datum({
    name: "foo"
  })
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", 60)
  .style("fill", "teal");
var box = svg.append("g")
  .attr("transform", "translate(300,50)");

box.append("rect")
  .attr("height", 50)
  .attr("width", 100)
  .style("stroke", "black")
  .style("fill", "none")
  .style("stroke-width", "2px");

circle.on("click", function(d) {
  box.append("text")
    .attr("x", 10)
    .attr("y", 20)
    .text(d.name)
})

最后，有两个提示：使选择内容成为文本的组或任何其他有效容器，不是矩形，因为您不能将文本附加到矩形上。另外，要为试图使文本适合于该矩形内的各种问题做好准备：将文本包装在SVG中非常复杂。

在onclick事件之后显示文本

1 个答案: