Question

我是D3.js的新手，我正在尝试构建代表XML文件中所有节点的矩形。到目前为止这么好，但我想要与我绘制的每个矩形进行交互，并且能够捕获已被触摸以进行进一步处理的节点。所以，让我说我点击一个矩形，我可以通过做一个onclick事件（比如增加字体大小）来做出反应，但我似乎无法检索到一些信息。我想创建一个数组，其中包含每个项目的文本。

这里是矩形的一个实例的代码。

d3.select("#chart")
.append("svg")
.attr("width", 600)
.attr("height", 2000)
.style("background", "#93A1A1")

d3.select("svg")
  .append("rect").attr("x", 50)
  .attr("y", 25)
  .attr("height", 20)
  .attr("width", 200)
  .attr("title", "resourceDef")
  .style("fill", "#CB4B19")

d3.select("svg")
  .append("text")
  .attr("x", 55)
  .attr("y", 37)
  .attr("font-size", 11)
  .attr("font-family", "sans-serif")
  .text("resourceDef")
  .on("mouseover", function(d) {
    tempText = this.text;
    alert(tempText);
d3.select(this)
  .attr("font-size", 15)})  
  .on("mouseout", function(d) {
  d3.select(this)
   .attr("font-size", 11)})

我可以通过使用而不是标题来获取样式信息，但我无法在任何地方找到该信息。感谢您的帮助，我知道这是一个很长的问题，可能只是一个简单的答案。

Answer 1

您可以通过执行以下操作在矩形DOM上将事件附加到事件上：

d3.select("svg")
    .append("rect").attr("x", 50)
    .attr("y", 25)
    .attr("height", 20)
    .attr("width", 200)
    .attr("title", "resourceDef")
    .style("fill", "#CB4B19")
    .on("click", function (d) {
    var t = d3.select(this).attr("title");
    //pushing the title into the array.
    clickedTitles.push(t);
    console.log(t);
});

您可以通过执行以下操作来获取DOM的属性（在您的情况下）：

.on("click", function (d) {
    var t = d3.select(this).attr("title");
    clickedTitles.push(t);
    console.log(t)
})

您可以将点击的矩形标题存储在如下数组中：

//create an array
var clickedTitles = [];
//in your click function push the title into the array
clickedTitles.push(t);

//use the clickedTitles where ever you need in the code

完整代码为here。

在D3.js中获取SVG属性的值

1 个答案: