Зеркало d3 графа горизонтально в JavaScript/html

Question

Я пытаюсь перевернуть график в JS без изменения оси. JavaScript не является моей специальностью, и после поиска в Интернете в течение 4 часов я начинаю думать, что это невозможно. Может кто-нибудь указать мне в правильном направлении, пожалуйста?

var width = 960, 
    height = 500; 

d3.json("data2.json", function(error, heatmap) { 
    var dx = heatmap[0].length, 
     dy = heatmap.length; 

    // Fix the aspect ratio. 
    // var ka = dy/dx, kb = height/width; 
    // if (ka < kb) height = width * ka; 
    // else width = height/ka; 

    var x = d3.scale.linear() 
     .domain([0, dx]) 
     .range([0, width]); 

    var y = d3.scale.linear() 
     .domain([0, dy]) 
     .range([height, 0]); 

    var color = d3.scale.linear() 
     .domain([null, 0, 30, 60, 90, 120]) 
     .range(["#FFFFFF", "#FF0000", "#FF9933", "#FFFF00", "#99FF33", "#00FF00"]); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("top") 
     .ticks(20); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("right"); 

    d3.select("body").append("canvas") 
     .attr("width", dx) 
     .attr("height", dy) 
     .style("width", width + "px") 
     .style("height", height + "px") 
     .call(drawImage); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
     .call(removeZero); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
     .call(removeZero); 


    function drawImage(canvas) { 
    var context = canvas.node().getContext("2d"), 
     image = context.createImageData(dx, dy);  


    for (var y = 0, p = -1; y < dy; ++y) { 
     for (var x = 0; x < dx; ++x) { 
     var c = d3.rgb(color(heatmap[y][x])); 
     image.data[++p] = c.r; 
     image.data[++p] = c.g; 
     image.data[++p] = c.b; 
     image.data[++p] = 255; 
     } 
    } 

    context.putImageData(image, 0, 0); 
    } 

    function removeZero(axis) { 
    axis.selectAll("g").filter(function(d) { return !d; }).remove(); 
    } 


}); 

Answer 1

Я вижу, что вы на самом деле не используете D3 для части кода, которая сама создает изображение. Во вложенных циклах, когда вы вручную создаете растровое изображение, вы можете просто перемещать данные в обратном порядке. Вместо индексации строки heatmap[y] непосредственно на x, вы должны указать на dx - x - 1, номер столбца, считая справа.

jsfiddle

Как в стороне, это кажется немного странным, микшировать методы SVG и холст рисунок здесь. В зависимости от того, сколько данных вы показываете, может быть полезно рисовать Heatmap с помощью SVG, что позволит вам использовать только один API для рисования диаграммы и также позволит взаимодействовать. В качестве альтернативы вы можете пойти на рисование всего на холсте, если статическое изображение более уместно, например, если масштаб данных массивный.