2014-11-23 2 views
2

Когда я добавляю текст в узел в макете направленного графика силы d3, указатель мыши изменяется на текстовый курсор, когда я нависаю над узлом. Есть ли способ избежать этого и всегда ли он оставаться регулярным указателем?d3 force direct graph remove text cursor

Normal Pointer:

Normal Pointer

Текст Курсор:

enter image description here

Вот fiddle с кодом, используемого для получения этих изображений, наряду с кодом:

var width = 960, 
    height = 500; 

var color = d3.scale.category20(); 

var force = d3.layout.force() 
    .charge(-120) 
    .linkDistance(30) 
    .size([width, height]); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var drawGraph = function(graph) { 
    force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

    var link = svg.selectAll(".link") 
     .data(graph.links) 
    .enter().append("line") 
     .attr("class", "link") 
     .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 

    var gnodes = svg.selectAll('g.gnode') 
    .data(graph.nodes) 
    .enter() 
    .append('g') 
    .classed('gnode', true) 
    .call(force.drag); 

    var node = gnodes.append("circle") 
     .attr("class", "node") 
     .attr("r", 5) 
     .style("fill", function(d) { return color(d.group); }); 

    node.append("title") 
     .text(function(d) { return d.name; }); 

    var labels = gnodes.append("text") 
       .text(function(d) { return d.name; }) 
       .attr('text-anchor', 'middle') 
       .attr('font-size', 8.0) 
       .attr('font-weight', 'bold') 
       .attr('y', 2.5) 
       .attr('fill', d3.rgb(50,50,50)) 
       .attr('class', 'node-label') 
       .append("svg:title") 
       .text(function(d) { return d.name; }); 

    force.on("tick", function() { 
    link.attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

        gnodes.attr("transform", function(d) { 
         return 'translate(' + [d.x, d.y] + ')'; 
        }); 
    }); 
}; 

ответ

4

Добавьте следующий CSS для текстовых элементов:

pointer-events: none; 

Это позволит предотвратить любые события мыши для текстовых элементов, т.е. курсор не изменится, но вы также не сможете выбрать текст.

Полное демо here.

+0

Отлично. Благодаря! –

Смежные вопросы