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 - 在单个水平条形图的左侧有值

回答

相关问题