Question

我正在使用D3JS构建时间表（请参见此处：Website），并且遇到了使圆圈不重叠的问题。

我在碰撞检测中阅读了以下链接：

Collision Detection Collision Detection D3 In Depth Force Layout

但是我似乎没有得到。我正在从CSV抓取数据，根据日期绘制圆圈。真的不确定我是否应该在添加圆或之后添加碰撞。

我能想到的一些起点：

向每个数据条目添加radius属性
在包含该半径的“ cy”属性中使用forceCollide

当我阅读更多有关此问题的信息时，我感到解决此问题的更好方法是先绘制所有圆，然后创建一个重绘函数

我的代码：

d3.csv("Lambda.csv").then(function(data) {

    //Process Dates
    data.forEach(function(d) {
        d.date = parseDate(dateValue(d));
    });


    //Define Timeline Domain
    var minDate = d3.min(data, d => dateValue(d));
    var maxDate = d3.max(data, d => dateValue(d));

    //Config Scale for Vertical Timeline
    yScale 
        .domain([maxDate, minDate])
        .range([0, 1000])
        .nice();

    //Config Axis
    yAxis.scale(yScale)
        .ticks(7); //revisit: arbitrary number 

    //Add Axis to SVG
    svg.append("g")
        .attr("class","axis-y")
        .call(yAxis);



    /* PLOTTING START */

    var node = svg.selectAll('.node')
        .data(data)
        .enter()
        .append("g")
        .attr("class", "node");

    node.append("svg:circle")
        .attr("class", "nodes")
        .attr("cx", 0)
        .attr("cy", d => yScale(dateValue(d)))
        .attr("r", radius)
        .attr("fill", "#3A3A3A")
        .forceCollide()
        .on("mouseover", handleMouseOver)
        .on("mouseout", handleMouseOut);

    var nodes = svg.selectAll(".node")
    svg.forceCollide(radius);
    /* PLOTTING END */

    /*
    SOMEHOW RELATED TO COLLISION DETECTION
    SOURCE: http://bl.ocks.org/fabiovalse/bf9c070d0fa6bab79d6a

    var force = d3.layout.force()
        .nodes(node)
        .gravity(.02)
        .charge(0)
        .on("tick", tick)
        .start();

    force.alpha(.05); // speed
    */
});

D3JS碰撞检测：修复重叠的圆

0 个答案: