时间戳

首页 > 解决方案 > 将 d3 热图从版本 3 转换为版本 5 时出错

html - 将 d3 热图从版本 3 转换为版本 5 时出错

问题描述

我正在将 d3 热图从版本 3 转换为版本 5。我遇到了一些我已经修复的错误。但图表显示不正确。一切都是重叠的。你们中的任何人都可以帮我解决这个问题。

这是我的 js 小提琴代码https://jsfiddle.net/amirhussain930/qf3420hs/16/

我有一个版本 3 中的示例。我已转换为 v5，但无法正确显示图表。

var response = [
{
"x": "France",
"y": "Apricot",
"value": 2.3129545439964723
},
{
"x": "France",
"y": "Avocado",
"value": 3.1610140317890965
},
{
"x": "France",
"y": "Lemon",
"value": 0.9075695440623942
},
{
"x": "France",
"y": "Date",
"value": 1.1296454803177811
},
{
"x": "France",
"y": "Strawberry",
"value": null
},
{
"x": "France",
"y": "Mandarin",
"value": 2.6193568568512493
},
{
"x": "France",
"y": "Chestnut",
"value": 0.08748279136251946
},
{
"x": "France",
"y": "Nuts",
"value": 2.943858242639327
},
{
"x": "France",
"y": "Olive",
"value": 1.3356914547843943
},
{
"x": "France",
"y": "Mirabelle",
"value": 0.31390905400247027
},
{
"x": "France",
"y": "Orange",
"value": 0.5709024568447734
},
{
"x": "France",
"y": "Fig",
"value": 0.8689875977541086
},
{
"x": "France",
"y": "Raisin",
"value": null
},
{
"x": "France",
"y": "Pear",
"value": null
},
{
"x": "France",
"y": "Potato",
"value": null
},
{
"x": "France",
"y": "Khaki",
"value": null
},
{
"x": "France",
"y": "Kiwi",
"value": 6.026783469350332
},
{
"x": "France",
"y": "Pumpkin",
"value": 0.5472217416389179
},
{
"x": "France",
"y": "Mango",
"value": null
},
{
"x": "France",
"y": "Cherry",
"value": 1.9472375734686518
},
{
"x": "Italy",
"y": "Apricot",
"value": 2.250335336990016
},
{
"x": "Italy",
"y": "Avocado",
"value": 1.4472931892677967
},
{
"x": "Italy",
"y": "Lemon",
"value": 1.7163168911863054
},
{
"x": "Italy",
"y": "Date",
"value": 0.6222770814456479
},
{
"x": "Italy",
"y": "Strawberry",
"value": null
},
{
"x": "Italy",
"y": "Mandarin",
"value": 1.9378611429750559
},
{
"x": "Italy",
"y": "Goyave",
"value": null
},
{
"x": "Italy",
"y": "Chestnut",
"value": 0.35446193006796944
},
{
"x": "Italy",
"y": "Nuts",
"value": 0.37199215156032084
},
{
"x": "Italy",
"y": "Olive",
"value": 1.05979039016384
},
{
"x": "Italy",
"y": "Orange",
"value": 1.9087621718437413
},
{
"x": "Italy",
"y": "Fig",
"value": 4.632439392448328
},
{
"x": "Italy",
"y": "Raisin",
"value": null
},
{
"x": "Italy",
"y": "Pear",
"value": null
},
{
"x": "Italy",
"y": "Potato",
"value": null
},
{
"x": "Italy",
"y": "Khaki",
"value": null
},
{
"x": "Italy",
"y": "Banana",
"value": null
},
{
"x": "Italy",
"y": "Blackcurrant",
"value": null
},
{
"x": "Italy",
"y": "Kiwi",
"value": 1.673923311217576
},
{
"x": "Italy",
"y": "Pumpkin",
"value": 0.8029920360319587
},
etc...
]; 
var itemSize = 22,
cellSize = itemSize - 1,
margin = {top: 120, right: 20, bottom: 20, left: 110};

var width = 750 - margin.right - margin.left,
height = 300 - margin.top - margin.bottom;
var data = response.map(function( item ) {
var newItem = {};
newItem.country = item.x;
newItem.product = item.y;
newItem.value = item.value;

return newItem;
})

var x_elements = d3.set(data.map(function( item ) { return item.product; } 
)).values(),
y_elements = d3.set(data.map(function( item ) { return item.country; } 
)).values();

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

var xAxis = d3.axisBottom()
.scale(xScale)
.tickFormat(function (d) {
return d;
})

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

var yAxis = d3.axisLeft()
.scale(yScale)
.tickFormat(function (d) {
return d;
})

var colorScale = d3.scaleThreshold()
.domain([0.85, 1])
.range(["#2980B9", "#E67E22", "#27AE60", "#27AE60"]);

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 cells = svg.selectAll('rect')
.data(data)
.enter().append('g').append('rect')
.attr('class', 'cell')
.attr('width', cellSize)
.attr('height', cellSize)
.attr('y', function(d) { return yScale(d.country); })
.attr('x', function(d) { return xScale(d.product); })
.attr('fill', function(d) { return colorScale(d.value); });

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)";
});

标签： htmldebuggingd3.jsheatmap

解决方案

你真的很亲近。您只需要将您的音阶从 更改scaleOrdinal为scaleBand。所以第 537 和 547 行应该是：

537:    var xScale = d3.scaleBand()
...
547:    var yScale = d3.scaleBand()

这是一个更新的 JSFiddle：https ://jsfiddle.net/9nwojxzg/2/

在此处查看 D3 的波段比例的文档：https ://github.com/d3/d3-scale#band-scales

希望这可以帮助！

推荐阅读