Question

我有一个包含行和列标题文本的表格，其中包含row3，col1等标记，...

我正在使用

.on("mouseover", highlight)

在表格内的矩形上，函数如下所示：

function highlight(d){

  var txt = d3.select("#col"+d3.select(this).attr("colNr"));
  txt.style('fill', 'darkOrange');
}

"#col"+d3.select(this).attr("colNr")为我提供了正确的"col2"（在调试器+警报中看到它）。但似乎是

d3.select("col2").style('fill', 'darkOrange');

对我来说没有改变任何事情...... 有人知道这里有什么不对吗？

修改：抱歉，如果没有剩下的代码，就无法解决这个问题：通过反复试验，我减少了可能的故障来源和它的不同之处。我认为我的范围有问题（？），减少了我的例子，它仍然有失败，但这里是完整的相关javascript代码：

<script>
var links;

var svgContainer = d3.select("div#container")
//.call(zm = d3.behavior.zoom().scaleExtent([0.1,3]).on("zoom", redraw))
.append("svg").attr("preserveAspectRatio", "xMinYMin meet").attr("viewBox",
        "0 0 1920 1080").classed("svg-container", true);

var g = svgContainer.append("g");

//exchange later with string
d3.json("graph.json", function(error, graph) {
    if (error)
        throw error;

    links = graph.links;

    addRects();
});

alert(links.length);

//end exchange
function addRects(){

    g.append("rect")
        .attr("x", 100)
        .attr("y", 100)
        .attr("width", 120)
        .attr("height", 80)
        .attr("fill", "#eeeeee")
        .attr("id","this1");

    g.append("rect")
        .attr("x", 300)
        .attr("y", 100)
        .attr("width", 120)
        .attr("height", 80)
        .attr("fill", "#eeeeee")
        .attr("id","this2");
}

d3.select("#this2").style("fill","#ff0000");

如果我复制d3.select（“＃this2”）。style（“fill”，“＃ff0000”）;在内部函数（@the json部分）中它起作用。但不是当它在外面。我仍然在努力使用这种类型的内部函数（这是一个闭包，对吧？）。我知道它有父母的功能范围。但我想例如通过声明var链接;在顶部（全局变量？）它在警报中有链接，但我得到“链接未定义”...所以内部函数链接是一个不同的变量？

Answer 1

d3.select选择与指定选择器字符串匹配的第一个元素。它需要一个元素类型或标识符。

所以大概你需要 -

d3.select("#col2").style('fill', 'darkOrange');

注意将{1}}符号标记为标识符。

如果没有它，select函数会查找名为col2的元素 - # - 而不是id为col2的元素 - <col2></col2>（其中x是任何有效的元素类型）。

d3js onmouseover突出显示无法正常工作

1 个答案: