d3 v4 - 在單個水平條形圖的左側有值

以下是當前形式的水平條形圖的代碼。我想將值移動到條形圖的左側。我試過.attr("text-anchor", "start")，但沒有奏效。任何幫助表示感謝，並希望您可以提供一些意見，以幫助解釋格式標籤/值的一些原則。謝謝！d3 v4 - 在單個水平條形圖的左側有值

var data = [{   
    "xAxis": "72.1" 
    }]; 
    var margin = { 
    top: 20, 
    right: 20, 
    bottom: 30, 
    left: 80 
    }, 
    width = 500 - margin.left - margin.right, 
    height = 200 - margin.top - margin.bottom; 
    var y = d3.scaleBand() 
    .range([height, 0]) 
    .padding(0.4); 
    var x = d3.scaleLinear() 
    .range([0, width]) 
    .domain([0, 100]); 
    var svg = d3.select(".barChartContainer").append("svg") 
    .attr("width", 500) 
    .attr("height", 200) 
    .append("g") 
    .attr("transform", 
    "translate(" + margin.left + "," + margin.top + ")"); 
    y.domain(data.map(function(d) { 
    return d.yAxis; 
    })); 
    var backgroundBar = svg.selectAll(null) 
    .data(data) 
    .enter() 
    .append("rect") 
    .attr("class", "barBackground") 
    .attr("y", function(d) { 
    return y(d.yAxis); 
    }) 
    .attr("height", y.bandwidth()) 
    .attr("width", function(d) { 
    return x(100); 
    }); 
    var bar = svg.selectAll(null) 
    .data(data) 
    .enter() 
    .append("rect") 
    .attr("class", "bar") 
    .attr("y", function(d) { 
    return y(d.yAxis); 
    }) 
    .attr("width", function(d) { 
    return x(d.xAxis); 
    }); 
    var labels = svg.selectAll(null) 
    .data(data) 
    .enter() 
    .append("text")   
    var values = svg.selectAll(null) 
    .data(data) 
    .enter() 
    .append("text")   
    .attr("y", function(d) { 
    return y(d.yAxis) + y.bandwidth()/2; 
    }) 
    .attr("x", 10) 
    .text(function(d) { 
    return +d.xAxis 
    }) 
    .attr("x", function(d) { 
    return x(d.xAxis) + 10; 
    });

當前條形圖

我想什麼

來源

2017-07-08 Ron I

我寫了這段代碼，回答了你最後一個問題。只需更改文本的'x'屬性即可。這條線是將文本移動到條的右邊距的那條線：'.attr（「x」，function（d）{return x（d.xAxis）+ 10;}）;'。將其改爲您想要的值（例如'-10'）。 –

@GerardoFurtado你想把答案（如下），所以我可以給你信貸？我將圍繞自定義此條形圖格式提出更多問題。 –

不，謝謝。隨時接受你自己的答案。只是一個提示：因爲任何文本的值都是一樣的，所以你不需要這個函數。只要做'.attr（「x」，x（-10））'。 –

更改的最後一行：

.attr("x", function(d) { 
     return x(d.xAxis) + 10; 
     });

並替換爲：

.attr("x", x(-10));

來源

2017-07-09 01:52:15

d3 v4 - 在單個水平條形圖的左側有值

回答

相關問題