时间戳

首页 > 解决方案 > 在 Jupyter 中使用 D3 - 不显示文本

javascript - 在 Jupyter 中使用 D3 - 不显示文本

问题描述

我目前正在尝试让 D3 在 Jupyter Notebook 中运行，有点遵循本指南：https ://www.stefaanlippens.net/jupyter-custom-d3-visualization.html

使用以下代码，我想将数字添加到条形图中的条形图：

%%javascript

(function(element) {
    require(['d3'], function(d3) {   
        var data = [1, 2, 4, 8, 16, 8, 4, 2, 1]
    var svg = d3.select(element.get(0)).append('svg')
        .attr('width', 400)
        .attr('height', 200);
    
    svg.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('width', function(d) {return d*10})
        .attr('height', 24)
        .attr('x', 0)
        .attr('y', function(d,i) {return i*30})
        .style('fill', 'darkgreen')
    svg.selectAll('rect')
        .append('text')            
        .text('mynumberhere')
        .attr('color', 'FF0000')

})
})(element);

目前只显示条形图，但不显示数字。不过，使用 HTML 检查器，我可以看到元素内部是一个元素。虽然没有显示。任何想法为什么会这样？

标签： javascripthtmld3.jsjupyter-notebook

解决方案

不可能将 a 附加text到rect元素上，它们不应该有孩子！您可以选择使用g-groups 代替，并将 therect和textinside 放在一起：

(function(element) {
  var data = [1, 2, 4, 8, 16, 8, 4, 2, 1]
  var svg = d3.select(element).append('svg')
    .attr('width', 400)
    .attr('height', 200);

  var g = svg.selectAll('g')
    .data(data)
    .enter()
    .append('g');

  g.append('rect')
    .attr('width', function(d) {
      return d * 10
    })
    .attr('height', 24)
    .attr('x', 0)
    .attr('y', function(d, i) {
      return i * 30
    })
    .style('fill', 'darkgreen')
  g
    .append('text')
    .text(function(d) { return d; })
    .attr('color', 'FF0000')
    .attr('dy', 16)
    .attr('dx', 3)
    .attr('x', function(d) {
      return d * 10
    })
    .attr('y', function(d, i) {
      return i * 30
    })
})(document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

推荐阅读