D3:无法根据其ID选择项目

时间:2015-07-30 19:27:16

标签: javascript d3.js nvd3.js

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

SyntaxError:指定了无效或非法的字符串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);

我该如何解决这个问题?

1 个答案:

答案 0 :(得分: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定义了有效的标识符。