Question

我正在尝试使用d3 js library v3生成热图。在尝试通过矩阵映射数据时，数据的映射是垂直完成的，但我需要水平映射数据。请参考附图中的预期输出。

＆＃13;

button.onClick = function() {
    isCtrlPressed = ScriptUI.environment.keyboardState.ctrlKey;
}

＆＃13;

var data = [
    {score: 0.5, row: 0, col: 0},
    {score: 0.7, row: 0, col: 1},
    {score: 0.2, row: 0, col: 2},
    {score: 0.4, row: 1, col: 0},
    {score: 0.2, row: 1, col: 1},
    {score: 0.4, row: 1, col: 2},
    {score: 0.4, row: 2, col: 0},
    {score: 0.2, row: 2, col: 1},
    {score: 0.4, row: 2, col: 2}
];

//height of each row in the heatmap
//width of each column in the heatmap
var gridSize = 50,
    h = gridSize,
    w = gridSize,
    rectPadding = 60;

var colorLow = 'green', colorMed = 'yellow', colorHigh = 'red';

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 640 - margin.left - margin.right,
    height = 380 - margin.top - margin.bottom;

var colorScale = d3.scale.linear()
     .domain([-1, 0, 1])
     .range([colorLow, colorMed, colorHigh]);

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 heatMap = svg.selectAll(".heatmap")
    .data(data, function(d) { return d.col + ':' + d.row; })
  .enter().append("svg:rect")
    .attr("x", function(d) { return d.row * w; })
    .attr("y", function(d) { return d.col * h; })
    .attr("width", function(d) { return w; })
    .attr("height", function(d) { return h; })
    .style("fill", function(d) { return colorScale(d.score); });

 var textLable =  svg.selectAll(".bartext")
        .data(data);
      textLable.exit().remove();
      textLable.enter()
              .append("text")
              .attr("class", "bartext")
              .attr("y", function(d) { return d.col * h * 1.2 ; })
               .attr("x", function(d) { return d.row * w * 1.2 ; })
    					
              
    .attr("height", function(d) { return h; })
   
              .style("text-anchor", "middle")              
              
              .text(function(d,i){
                return i ;
              });

＆＃13;

http://jsfiddle.net/QWLkR/2/

Expected Output

Answer 1

在您的热图变量中，您将X坐标设置为等于行的宽度，这意味着较高的行将具有较高的X坐标，其中应具有较高的Y坐标。交换这些以使代码按您的意愿工作。

.attr("x", function(d) { return d.col * h; })
.attr("y", function(d) { return d.row * w; })

D3 js选择矩形

1 个答案: