javascript - d3js onmouseover 突出显示不起作用

Question

我有一个表格，其中包含行和列标题文本，其 ID 类似于 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 部分)中它起作用了。但不是在外面。我仍在为这种类型的内部函数苦苦挣扎(这是一个闭包，对吧？)。我知道它有它的 parent 职能范围。但是我认为例如通过声明 var 链接；在顶部(全局变量？)它在警报中有链接，但我得到“链接未定义”......所以内部函数链接是一个不同的变量？

Answer 1

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

所以大概你需要 -

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

注意 #将字符串标记为标识符的井号。

如果没有它，select 函数将寻找一个名为 col2 的元素 - <col2></col2> - 而不是具有 id col2 的元素 - <x id='col2'></x> (其中 x 是任何有效的元素类型)。