Question

我正在尝试在d3中在地图上绘制点，但是当前存在很多重复绘制的情况，因此我正在尝试使用力导向布局，以使这些点之间不会真正重叠。

我一直在关注this教程，但似乎无法获得使用tickAction更新的圆圈位置。

这是我拥有的相关代码

  d3.csv('data6.csv').then( function(data) {


      var simulation = d3.forceSimulation()
          .nodes(data);

      simulation
          .force("charge_force", d3.forceManyBody())
          .force("center_force", d3.forceCenter(width / 2, height / 2));


      var node = dotLayer.selectAll('circle')
        .data(data)
        .enter()
        .append('circle')
        // .attr("cx",function(d) { 
        //   var num = Math.floor(Math.random()*4); // this will get a number between 1 and 99;
        //   num *= Math.floor(Math.random()*2) == 1 ? 1 : -1; // this will add minus sign in 50% of cases
        //   return projection([d.Longitude,d.Latitude])[0] + num; }).merge(g)
        // .attr("cy",function(d) {
        //   var num = Math.floor(Math.random()*4); // this will get a number between 1 and 99;
        //   num *= Math.floor(Math.random()*2) == 1 ? 1 : -1; // this will add minus sign in 50% of cases
        //   return projection([d.Longitude,d.Latitude])[1] + num; }).merge(g)
        .attr("r", .5)
        .on("mouseover", function(d){d3.select(this).raise().attr('r', 1); tooltip.html("Restaurant Name: " + d.ProgramIdentifier + "<br>" + "Address: " + d.Address + " Seattle, WA " + d.Zip + '<br/>' + "Most Recent Inspection Date: " + d.InspectionDate); return tooltip.style("visibility", "visible");})
        .on("mousemove", function(){return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
        .on("mouseout", function(){d3.select(this).attr("r", .5); return tooltip.style("visibility", "hidden");})
        .attr("fill", d => d3.color(colorr(d.InspectionScore)))
        .attr("stroke-width", .1)
        .attr("stroke", d => d3.color(colorrr(d.InspectionScore)))
        .attr("opacity", .8)
        ;

        function tickActions() {
          //update circle positions each tick of the simulation 
          node
              .attr("cx", function(d) { return projection([d.Longitude,d.Latitude])[0]; }).merge(g)
              .attr("cy", function(d) { return projection([d.Longitude,d.Latitude])[1]; }).merge(g);
        }

  });

现在，圆圈消失了。根据教程，他们只在tickActions中使用简单的d.x和d.y，是否需要编辑数据以获取x和y点而不是纬度和经度？如果是这样，我将如何去做？任何帮助，将不胜感激。谢谢。

d3 v5强制指向地图上的点

0 个答案: