Question

我在直方图中添加文字时遇到问题。我可以用更简单的例子来做到这一点。

我尝试这样做：

// try to add bar value  
var barnum = g.selectAll('text')
              .data(layout)
              .enter()
              .append("text")
              .attr('y',-10)
              .attr('x',10)
              .attr("text-anchor", "middle")
              .style("fill","black")
              .text('testtest')
              .style("pointer-events", "none")
        ;
  barnum.transition();

我无法在图中看到任何文字。代码包括定义在这里：

var dateFormat = d3.time.format("%Y-%m-%d");
  var g;
  var data;
    var margin = {top: 30, right: 30, bottom: 80, left: 80},
        width = 500 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
  var cx = 10;
  var numberBins = 5;
  var dispatch = d3.dispatch(chart, "hover");

  function chart(container) {
    g = container;

    update();
  }
  chart.update = update;
  function update() {

    // create hist layout
    var hist = d3.layout.histogram()
                  .value(function(d) { return d.selectvar })
                  .range([d3.min(data, function(d){ return d.selectvar }) ,           d3.max(data, function(d){ return d.selectvar }) ])
                  .bins(numberBins);
    var layout = hist(data);

    var maxLength = d3.max(layout, function(d) { return d.length });
    var widthScale = d3.scale.linear()
                      .domain([0, maxLength])
                      .range([0, width])

    var yScale = d3.scale.ordinal()
                  .domain(d3.range(numberBins))
                  .rangeBands([height, 0], 0)

    var colorScale = d3.scale.category20();

    // create svg 
    var rects = g.selectAll("rect")
                .data(layout)

    rects.enter().append("rect")

    rects .transition()
          .duration(500)
          .attr({
            y: function(d,i) {
              return yScale(i)
            },
            x: 50,
            height: yScale.rangeBand(),
            width: function(d,i) {
              return widthScale(d.length)
            },
            fill: function(d, i) { return colorScale(i) }
          });

    rects.exit().transition().remove();


// try to add bar value  
    var barnum = g.selectAll('text')
                  .data(layout)
                  .enter()
                  .append("text")
                  .attr('y',-10)
                  .attr('x',10)
                  .attr("text-anchor", "middle")
                  .style("fill","black")
                  .text('testtest')
                  .style("pointer-events", "none")
            ;
      barnum.transition();

我创建svg元素的方法有问题吗？我从一开始就发现了一些成功的案例使用追加（＆＃39; g＆＃39;）。 d3.js新手！谢谢。

Answer 1

您正在使用d3.dispatch，该文件标题为Internals。这并不意味着你不应该使用它，而是它不应该是你的第一选择。

你说“我创建svg元素的方式有问题”你是对的 - 你没有创建一个！尝试：

var svg = d3.select("body").append("svg");
var g = svg.append("g");

此时，您需要对DOM，SVG标准，CSS选择器和D3的选择API有一个很好的理解，以使事情有效。你不要告诉D3在你的酒吧上放标签就是这样。你必须指导它创建什么元素，在哪里，跟踪翻译和偏移以及类似的东西。你最好复制和学习Mike Bostock的many examples之一。

D3没有快速学习。在制作任何你喜欢的图表之前，你需要花时间学习它。

在每个直方图条上添加文本

1 个答案: