直接部隊布局定制-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中而不是動態添加。