D3: 不能 select 基于其 id 的项目

Question

我想在我的屏幕上可视化一堆圆圈并使它们可以拖动。我正在为每个圈子分配一个唯一的 ID。后来我试图通过 on("dragend", ..) 事件中的 id select 一个特定的圈子，但我收到以下错误：

语法错误：指定了无效或非法的字符串1 d3.js:549:0

    var drag = d3.behavior.drag()
        .on("drag", function(d,i) {
            d3.select(this).attr("cx", d3.event.x)
            d3.select(this).attr("cy", d3.event.y) 
         })

        .on("dragend",function(d,i){    
            var previous= d3.select("#3")  // Here I am getting Error
            console.log(previous);
         });

var circle = svg.selectAll('circle')
    .data(csv)
    .enter()
    .append("circle")
    .attr("stroke", "black")
    .attr("id",function(d,i){return i;})
    .attr("fill", function(d) {return color(d.Cyl);})
    .attr("cx", function(d) { return xScale(d.Weight); })
    .attr("cy", function(d) { return yScale(d.DealerCost); })
    .attr("r", function(d) { return d.EngineSize+2; })
     .call(drag);

我该如何解决这个问题？

Answer 1

问题正是您在错误消息中遇到的问题 -- 您不能以数字开头 ID。要修复，只需前缀：

.attr("id",function(d,i){return "id_" + i;})

.on("dragend",function(d,i){    
        var previous= d3.select("#id_" + (i-1))  // Here I am getting Error
        console.log(previous);
     });

CSS specification 定义了有效的标识符。

D3: 不能 select 基于其 id 的项目

D3: Cannot select an item based on its id

javascript

d3.js

nvd3.js