Question

这是参考这个d3图表：http://bl.ocks.org/mbostock/1093025

我使用相同的图表，但我想在每个栏中添加两种数据：a）名称b）大小

但我希望名称左侧对齐，右侧大小。这可能吗？如果有，有人可以教我吗？非常感谢：）

Answer 1

感谢@lars我想出了如何将它设置为正确。这是我的代码的样子：

nodeEnter.append("text")

    .attr("dy", 3.5)
    .attr("dx", 5.5)
    .text(function(d) { return d.name});

nodeEnter.append("text")
    .attr("dy", 3.5)
    .attr("dx", barWidth-10)
    .text(function(d) { return d.size + " total contracts"; })
    .attr("text-anchor", "end");

我将“dx”设置为条形宽度，然后减去10 px以给它一点填充。这就是它的样子：

Answer 2

试试这种方式。希望代码中的注释有帮助。

  var subRects = nodeEnter.filter(function(d,i){ return d.size });

  subRects.append("text")
    .attr("dy", 3.5)
    .attr("dx", function(d) {
      var lengthOfTextLabel = (d.size + "").length * 8; //Suppose 8 pixels is needed for each char
      return barWidth - lengthOfTextLabel;
    })
    .text(function(d) {
      return d.size;
    });

var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 20
  },
  width = 960 - margin.left - margin.right,
  barHeight = 20,
  barWidth = width * .8;

var i = 0,
  duration = 400,
  root;

var tree = d3.layout.tree()
  .nodeSize([0, 20]);

var diagonal = d3.svg.diagonal()
  .projection(function(d) {
    return [d.y, d.x];
  });

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var flare = {
  "name": "flare",
  "children": [{
    "name": "analytics",
    "children": [{
      "name": "cluster",
      "children": [{
        "name": "AgglomerativeCluster",
        "size": 3938
      }, {
        "name": "CommunityStructure",
        "size": 3812
      }, {
        "name": "HierarchicalCluster",
        "size": 6714
      }, {
        "name": "MergeEdge",
        "size": 743
      }]
    }, {
      "name": "graph",
      "children": [{
        "name": "BetweennessCentrality",
        "size": 3534
      }, {
        "name": "LinkDistance",
        "size": 5731
      }, {
        "name": "MaxFlowMinCut",
        "size": 7840
      }, {
        "name": "ShortestPaths",
        "size": 5914
      }, {
        "name": "SpanningTree",
        "size": 3416
      }]
    }, {
      "name": "optimization",
      "children": [{
        "name": "AspectRatioBanker",
        "size": 7074
      }]
    }]
  }, {
    "name": "animate",
    "children": [{
      "name": "Easing",
      "size": 17010
    }, {
      "name": "FunctionSequence",
      "size": 5842
    }, {
      "name": "interpolate",
      "children": [{
        "name": "ArrayInterpolator",
        "size": 1983
      }, {
        "name": "ColorInterpolator",
        "size": 2047
      }, {
        "name": "DateInterpolator",
        "size": 1375
      }, {
        "name": "Interpolator",
        "size": 8746
      }, {
        "name": "MatrixInterpolator",
        "size": 2202
      }, {
        "name": "NumberInterpolator",
        "size": 1382
      }, {
        "name": "ObjectInterpolator",
        "size": 1629
      }, {
        "name": "PointInterpolator",
        "size": 1675
      }, {
        "name": "RectangleInterpolator",
        "size": 2042
      }]
    }, {
      "name": "ISchedulable",
      "size": 1041
    }, {
      "name": "Parallel",
      "size": 5176
    }, {
      "name": "Pause",
      "size": 449
    }, {
      "name": "Scheduler",
      "size": 5593
    }, {
      "name": "Sequence",
      "size": 5534
    }, {
      "name": "Transition",
      "size": 9201
    }, {
      "name": "Transitioner",
      "size": 19975
    }, {
      "name": "TransitionEvent",
      "size": 1116
    }, {
      "name": "Tween",
      "size": 6006
    }]
  }]
};

flare.x0 = 0;
flare.y0 = 0;
update(root = flare);

function update(source) {

  // Compute the flattened node list. TODO use d3.layout.hierarchy.
  var nodes = tree.nodes(root);

  var height = Math.max(500, nodes.length * barHeight + margin.top + margin.bottom);

  d3.select("svg").transition()
    .duration(duration)
    .attr("height", height);

  /*d3.select(self.frameElement).transition()
    .duration(duration)
    .style("height", height + "px");*/

  // Compute the "layout".
  nodes.forEach(function(n, i) {
    n.x = i * barHeight;
  });

  // Update the nodes…
  var node = svg.selectAll("g.node")
    .data(nodes, function(d) {
      return d.id || (d.id = ++i);
    });

  var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) {
      return "translate(" + source.y0 + "," + source.x0 + ")";
    })
    .style("opacity", 1e-6);

  // Enter any new nodes at the parent's previous position.
  nodeEnter.append("rect")
    .attr("y", -barHeight / 2)
    .attr("height", barHeight)
    .attr("width", barWidth)
    .style("fill", color)
    .on("click", click);

  nodeEnter.append("text")
    .attr("dy", 3.5)
    .attr("dx", 5.5)
    .text(function(d) {
      return d.name;
    });
  
  var subRects = nodeEnter.filter(function(d,i){ return d.size });

  subRects.append("text")
    .attr("dy", 3.5)
    .attr("dx", function(d) {
      var lengthOfTextLabel = (d.size + "").length * 8; //Suppose 8 pixels is needed for each char
      return barWidth - lengthOfTextLabel;
    })
    .text(function(d) {
      return d.size;
    });

  // Transition nodes to their new position.
  nodeEnter.transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + d.y + "," + d.x + ")";
    })
    .style("opacity", 1);

  node.transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + d.y + "," + d.x + ")";
    })
    .style("opacity", 1)
    .select("rect")
    .style("fill", color);

  // Transition exiting nodes to the parent's new position.
  node.exit().transition()
    .duration(duration)
    .attr("transform", function(d) {
      return "translate(" + source.y + "," + source.x + ")";
    })
    .style("opacity", 1e-6)
    .remove();

  // Update the links…
  var link = svg.selectAll("path.link")
    .data(tree.links(nodes), function(d) {
      return d.target.id;
    });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
    .attr("class", "link")
    .attr("d", function(d) {
      var o = {
        x: source.x0,
        y: source.y0
      };
      return diagonal({
        source: o,
        target: o
      });
    })
    .transition()
    .duration(duration)
    .attr("d", diagonal);

  // Transition links to their new position.
  link.transition()
    .duration(duration)
    .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
    .duration(duration)
    .attr("d", function(d) {
      var o = {
        x: source.x,
        y: source.y
      };
      return diagonal({
        source: o,
        target: o
      });
    })
    .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

function color(d) {
  return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}

.node rect {
  cursor: pointer;
  fill: #fff;
  fill-opacity: .5;
  stroke: #3182bd;
  stroke-width: 1.5px;
}
.node text {
  font: 10px sans-serif;
  pointer-events: none;
}
path.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

将两种数据作为文本附加在相反的方向

2 个答案: