旋轉變換

Question

你好，我有這樣的視覺：https://plnkr.co/edit/H6M1xoS9cZv5dKCTIyid?p=preview

我試圖旋轉x軸的標籤，並嘗試在線路299-317無濟於事修改代碼 - 所以我覺得代碼如.attr("transform", "rotate(-65)");需要添加到以下內容？

// Add x labels to chart 
var xLabels = svg 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + (margin.top + height) + ")"); 

xLabels.selectAll("text.xAxis") 
    .data(BarData) 
    .enter() 
    .append("text") 
    .text(function(d) { 
    return d.dt; 
    }) 
    .attr("text-anchor", "middle") 
    // Set x position to the left edge of each bar plus half the bar width 
    .attr("x", function(d, i) { 
    return (i * (width/BarData.length)) + ((width/BarData.length - barPadding)/2); 
    }) 
    .attr("y", 15) 
    .attr("class", "xAxis") 

Answer 1

您的問題是您正在使用.attr("x"來定位軸文本。你應該使用translate來做到這一點，否則你的旋轉將旋轉從左下角的所有元素。

的代碼應該是這樣的，在翻譯和旋轉應該在同一轉換功能內發生：

.attr("transform", function (d, i) { 
    return "translate(" 
     + ((i * (width/BarData.length)) + ((width/BarData.length - barPadding)/2)) 
     + ", 0) rotate(-65)"; 
}) 

這是你的普拉克的工作版本：https://plnkr.co/edit/UqwtLqTn6iJ2XS012Vr4?p=preview

希望這有助於。

Answer 2

的鏈接幫助下，我終於用下面的代碼：

xLabels.selectAll("text.xAxis") 
    .data(BarData) 
    .enter() 
    .append("text") 
    .text(function(d) { 
    return d.dt; 
    }) 
    .attr({ 
    'text-anchor': "middle", 
    transform: function(d, i) { 
     var x = (i * (width/BarData.length)) + ((width/BarData.length - barPadding)/2); 
     var y = 20; 
     return 'translate(' + x + ',' + y + ')rotate(-90)'; 
    }, 
    dy: "0.35em", 
    'class': "xAxis" 
    }) 

工作示例這裏：https://plnkr.co/edit/3d5UhM?p=preview

我還添加在屬性dy: "0.35em"的標籤完全中心到每個酒吧。