Javascript 无法显示D3中分位数刻度的图例_Javascript_D3.js

Javascript 无法显示D3中分位数刻度的图例

javascript d3.js

Javascript 无法显示D3中分位数刻度的图例,javascript,d3.js,Javascript,D3.js,我正在尝试为我创建的热图显示图例，但无法做到这一点。这是我的HTML <html> <head> <title>Heat Map Data Visualization</title> </head> <body> <div class='chart-area'> <svg class='chart'></svg> <svg clas

我正在尝试为我创建的热图显示图例，但无法做到这一点。这是我的HTML

<html>
  <head>
    <title>Heat Map Data Visualization</title>
  </head>
  <body>
    <div class='chart-area'>
      <svg class='chart'></svg>
      <svg class='legend'></svg>
    </div>
  </body>
</html>

当我使用Chrome Developer工具检查元素时，我看到所需的g元素已经创建，但它们的尺寸都是0x0

我在某个地方读到，rect元素只能附加到svg元素，这就是为什么我修改了HTML代码，将svg元素包含在一个legend类中，但是我仍然没有得到任何结果

这里是这个程序的代码笔链接

我对你的笔做了如下修改：

希望这有帮助，祝你好运

我对你的笔做了如下修改：

希望这有帮助，祝你好运

var legend = d3.select('.legend')
                 .data([0].concat(colorScale.quantiles()), function(d){
                   return d;
                 });

  legend.enter()
        .append('g')
        .attr('class', 'legend-element');

  legend.append("rect")
        .attr("x", function(d, i) {
          console.log(i);
          return legendElementWidth * i + (width - legendElementWidth * buckets);
        })
        .attr("y", height)
        .attr("width", legendElementWidth)
        .attr("height", gridHeight / 2)
        .style("fill", function(d, i) {
          return colors[i];
        });

// Save the legend svg in a variable   
// also changed the translate in order to keep the legend within the svg         
// and place it on the right side just for the example's sake
    var legendSvg = svg.append('g')
         .attr('class', 'legend')
        .attr("transform","translate("+ (width - 40) + ",20)")

// Define the legend as you did
var legend = d3.legendColor()
                 .useClass(true)
                 .shape('rect')
                 .orient('vertical')
                 .title('Temperature Variance')
                 .shapeWidth(legendElementWidth)
                 .scale(colorScale);

// And then call legend on the legendSvg not on svg itself
 legendSvg.call(legend);