Question

我正在玩D3来制作热图。我正在创建NxN正方形颜色，我想改变调整。但是，只有第一个方块显示为蓝色，其余的根据html检查器显示并具有颜色设置，但它们不会显示在页面上。

    size = 30;
    length = myJSON.length;
    numRows = length /2;
    numCols = length / 2;

    var svg = d3.select("div#heatchart").append("svg").attr("width",size).attr("height",size);

    svg.selectAll("rect").data(myJSON).enter().append("rect").attr("x",function(d,i){
        var x = Math.floor(i%numRows) * (size+1);
        return x;
    }).attr("y",function(d,i){
        var y = Math.floor(i/numCols) * (size+1);
        return y;
    }).attr("width",function(d,i){
        return size;
    }).attr("height",function(d,i){
        return size;
    }).attr("fill", function(d,i) {
        return "rgb(0, 0, 255)";
    });

Answer 1

您只看到一个方格的原因是您已将<svg>元素的尺寸设置为等于仅为30的变量size。正在绘制正方形，但它们超出了svg文档的范围，因此不可见。

修复后，您仍然会遇到布局问题，因为您要根据length除以一半来设置行数和列数。你真正想要做的是建立一个NxN平方是基于length的平方根上的行数和列数。如果数据长度不是完美的正方形，您可以使用Math.ceil进行舍入。试试这样：

var size = 30;
var n = myJSON.length;
var numRows = Math.ceil(Math.sqrt(n)),
    numCols = numRows;

然后，您可以根据需要显示的行数和列数来设置svg的大小：

var svg = d3.select('div#heatchart').append('svg')
  .attr('width', size * numCols)
  .attr('height', size * numRows);

最后，将它们排列在一个正方形中，将填充设置为蓝色：

svg.selectAll('rect')
  .data(myJSON)
  .enter().append('rect')
    .attr('x', function(d,i) { return (i % numCols) * size; })
    .attr('y', function(d,i) { return Math.floor(i / numRows) * size; })
    .attr('width', size)
    .attr('height', size)
    .attr('fill', 'blue');

HERE就是一个例子。

Answer 2

您需要一个svg组元素（<g> - 这不是真的，请参阅编辑）。

修改，看起来像这样

var svg = d3.select("div#heatchart")
            .append("svg")
            .append("g")
            .attr("width", size)
            .attr("height", size);

e.g。 http://jsfiddle.net/4tz5wk91/

修改此示例有效但不是出于所述原因。 attr函数不再影响svg元素，因此它获得的默认大小足以显示所有元素。在这种情况下，应用于组的宽度和高度属性实际上不起作用。请参阅@ jshanley的更完整和正确的解决方案。

D3矩形+颜色不显示

2 个答案: