直接部队布局定制-d3.js

Question

关于堆栈溢出的第一个问题，请多多包涵！ 我是d3.js的新手，但是一直被其他人能够完成的工作感到惊讶...几乎令我惊讶的是，我本人可以用它取得多少进展！ 显然，我没有在偷东西，所以我希望这里的善良灵魂能够向我展示光明。

我的意图是基于CSV数据制作一个连接图。 我的CSV数据具有不同的信息，其中一些需要表示为节点，其中一些需要用作ltool-tip的信息。 我可以使用以下代码片段从CSV读取数据：

d3.csv("data/project.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    link.source = nodeByName(link.Project);
    link.target = nodeByName(link.Problem);
  });

它将把节点P1连接到三个节点问题（URL）。 问题出现之后，我在所选节点上看不到标签，如何使用CSV文件中的提取信息，例如“日期，摘要，URL”。 有什么方法可以使用鼠标单击，当我单击节点时，我需要它的信息出现在SVG板上以用于进一步分析，例如显示URL，摘要的短文本，以及当用户单击板上时应该显示完整的信息。

这是我从此链接中使用的代码

    var width = 800,
    height = 600;

var svg = d3.select("#visualization")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("svg:g");

var force = d3.layout.force()
    .gravity(0.2)
    .distance(200)
    .charge(-1500)
    .size([width, height]);

var container = svg.append("g")
    .attr("id", "container");

d3.csv("data/project.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    link.source = nodeByName(link.Project);
    link.target = nodeByName(link.Problem);
  });

  // Extract the array of nodes from the map by name.
  var nodes = d3.values(nodesByName);

  //define a scale for color mapping
  var colormapping = d3.scale.ordinal()
      .domain([0,nodes.length])
      .range(['#A700E6','#D95B96','#F4DA88','#22C1BE','#F24957','#DBEF91','#CF8EE8','#FF9B58','#B8FFC4','#91AEFF','#E873D3','#CCB298']);

  //create label node tooltip
  var labeltooltip = d3.select("body").append("div")
    .attr("class", "labeltooltip")
    .style("opacity", 1e-6);
  var zoom = d3.behavior.zoom()
     .scaleExtent([1, 10])
     .on("zoom", function() {
         container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
     });

     svg.call(zoom);
  //links
  var link = container.selectAll(".line")
      .data(links)
      .enter()
      .append("line")
      .attr("stroke-width",4)
    //  .attr("stroke-width",function (d) { return linethickness(d.value); })
      .style("stroke", "gray");

  // Create the node circles.
  var node = container.selectAll(".node")
      .data(nodes)
      .enter()
      .append("circle")
      .attr("class", "node")
      .attr("r", 20)
      .attr("fill", function (d,i) {return d3.rgb(colormapping(i)); })
      .call(force.drag);


  // Start the force layout.
  force
      .nodes(nodes)
      .links(links)
      .on("tick", tick)
      .start();

 node.on("mousemove", function(d) {
    labeltooltip.selectAll("p").remove();
    labeltooltip.style("left", (d3.event.pageX+15) + "px").style("top", (d3.event.pageY-10) + "px");
    labeltooltip.append("p").attr("class", "tooltiptext").html("<span>Id: </span>" + d.Score );
        labeltooltip.append("p").attr("class", "tooltiptext").html("<span>Score: </span>" + d.Score);
  }); 


 node.on("mouseover", function(d) {
        labeltooltip.transition()
          .duration(500)
          .style("opacity", 1);
        link.style('stroke', function(l) {
            if (d === l.source || d === l.target)
              return d3.rgb('#C20606');
            else
              return 'gray';
            });
        link.style('opacity', function(o) {
            return o.source === d || o.target === d ? 1 : 0;
        });
        node.style("opacity", function(o) {
            if (o.id != d.id)
                return neighboring(d.id, o.id) ? 1 : 0;
        });
    }); 

 node.on("mouseout", function(d) {
        labeltooltip.transition()
          .duration(500)
          .style("opacity", 1e-6);
    link.style('stroke', 'gray');
    link.style('opacity', 1);
    node.style("opacity", 1);  
    });

var circletext = node.append("svg:text")
    .text(function(d) {return d.name;})
    .attr("class","labelText");
  function tick() {
    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; });

    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
    circletext.attr("x", function(d) { return d.x-25; });
    circletext.attr("y", function(d) { return d.y-25;});
  }

  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
    addZoomMoveIcon("#labelgraph");
});

更新我的CSV数据

Project,Problem, Score,Data,Summary,id
p1,Problem1,10,2014-09-04T13:55:05.623-04:00, text text text text, 1
p1,Problem2,5,2014-09-04T13:55:05.623-04:00, text text text text,2
p1,Problem3,11,2014-09-04T13:55:05.623-04:00, text text text text,3

我想要的最终结果如下图所示：

单击“问题”节点时，SVG上黄色框应出现的位置。

Answer 1

您需要解决的第一个问题就是要正确添加节点文本。 现在，您正在将文本嵌套在圆内，但是文本标签需要是圆的同级物（它们甚至不需要直接位于每个圆旁边）。 您可以替换为：

var circletext = node.append("svg:text")
.text(function(d) {return d.name;})
.attr("class","labelText");

附：

var circletext = container.selectAll("g")
.data(nodes)
.enter()
.append("text").text(function(d) {return d.name})
.attr("class", "labelText");

（参考： https : //www.dashingd3js.com/svg-text-element ）

但是，接下来，如果要显示“分数/数据/摘要”，请注意这些是附加在链接上的，而不是附加在节点上的（它们只有三个，而不是四个）。 但是，在节点创建时，您可以将此信息从链接传递到节点。 修改nodeByName函数以添加节点的新属性：

function nodeByName(name,score,data,summary) {
    return nodesByName[name] || (nodesByName[name] = {name: name, score: score, data: data, summary: summary});
}

创建链接时，然后修改对此函数的调用：

links.forEach(function(link) {
    link.source = nodeByName(link.Project);
    link.target = nodeByName(link.Problem,link.Score,link.Data,link.Summary);
});

为了使labeltooltip可以显示在固定位置而不是节点附近，您需要删除节点上的鼠标mouseover和mouseout事件中使div移动的位，并且可能只是将div添加到html中而不是动态添加。