热图不显示第一个矩形答案

【问题标题】：Heatmap does not show the first rect热图不显示第一个矩形
【发布时间】：2018-04-15 16:47:13
【问题描述】：

我根据 data.csv 文件中包含的一些数据创建了一个热图。

这里是代码。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Heatmap</title>
   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
   <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
</head>
<body>
   <div id="heatmap"></div>
   <script src="./heatmap.js"></script>
</body>
</html>

script.js:

var itemSize = 15;
var cellSize = itemSize - 1;
var margin = {top: 50, right: 20, bottom: 20, left: 150};
var width = 445 - margin.right - margin.left;
var height = 430 - margin.top - margin.bottom; 

var svg = d3.select('#heatmap')
    .append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var colorScale = d3.scaleLinear()
    .domain([0, 85, 100])
    .range(['white', 'tomato', 'steelblue']);

svg.append('defs')
    .append('pattern')
        .attr('id', 'pattern-stripes')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('patternTransform', 'rotate(45)')
        .attr('width', 3)
        .attr('height', 3)
        .append('rect')
            .attr('width', 1)
            .attr('height', 3)
            .attr('transform', 'translate(0, 0)')
            .attr('fill', 'black');

d3.queue()
    .defer(d3.csv, './data.csv')
   .await(create);

function create(err, data) {
    if(err) {
      console.log('Error loading files:', err);
      throw error;
    }
   var data = data.map(function(item) {
        var newItem = {};
        newItem.nuts_id = item.NUTS_ID;
        newItem.nuts_name = item.NUTS_NAME;
        newItem.year = item.YEAR;
        newItem.valuePol = item.POL;
        return newItem;
    });

    var years = data.map(function(d) {
        return d.year;
    });
    var x_elements = d3.set(years).values();

    var nuts_names = data.map(function(d) {
        return d.nuts_name;
    });
    var y_elements = d3.set(nuts_names).values();

    var xScale = d3.scaleBand()
        .domain(x_elements)
        .range([0, x_elements.length * itemSize]);

    var xAxis = d3.axisTop(xScale)
        .tickFormat(function(d) {
            return d; // d is the year
        });

    var yScale = d3.scaleBand()
        .domain(y_elements)
        .range([0, y_elements.length * itemSize]);

    var yAxis = d3.axisLeft(yScale)
        .tickFormat(function(d) {
            return d; // d is the region
        }); 

    var cells = svg.selectAll('rect')
        .data(data)
        .enter()
        .append('g')
        .append('rect')
        .attr('class', 'cell')
        .attr('width', cellSize)
        .attr('height', cellSize)
        .attr('x', function(d) { 
            return xScale(d.year); 
        })
        .attr('y', function(d) { 
            return yScale(d.nuts_name); 
        })
        .attr('fill', function(d) {
            var col;
            if(d.valuePol == '') {
                col = 'url(#pattern-stripes)';
            }
            else {
                col = colorScale(d.valuePol); 
            }
            return col;
        });

    svg.append('g')
        .attr('class', 'y axis')
        .call(yAxis)
        .selectAll('text')
        .attr('font-weight', 'normal');

    svg.append('g')
        .attr('class', 'x axis')
        .call(xAxis)
        .selectAll('text')
        .attr('font-weight', 'normal')
        .style('text-anchor', 'start')
        .attr('dx', '.8em')
        .attr('dy', '.5em')
        .attr('transform', function(d) {
            return 'rotate(-65)';
        });
}

PLUNKER 上的工作代码。

这是结果：

热图已正确创建，但未显示的第一个矩形除外。

然而数据是以正确的方式获取的，那么问题出在哪里？没看懂。。

【问题讨论】：

标签： d3.js data-visualization heatmap

【解决方案1】：

我知道这是重复的，但我找不到匹配的所以...

永远不要盲目地按元素名称全选：

svg.selectAll('rect')

您的 SVG 中还有其他 rect 元素被包含在内，导致奇怪的行为。而是这样做：

svg.selectAll('.cell')
    .data(data)
    .enter()

这会将选择定位到您真正将数据绑定到的对象。

更新plunker。

【讨论】：