我怎么可能从下面的代码中以水平方向绘制条形图，并在条形图的中心绘制文本？ 要求是使用路径可视化条形图。并且还要在栏的中心显示值。
d3.json('https://api.myjson.com/bins/jbdu6', function (data) {
var width = 500;
var height = 500;
var svg = d3.select("#chart").append("svg")
.attr("height",height)
.attr("width",width);
var x = d3.scale.ordinal()
.domain(d3.range(data.length))
.range([0,width])
.rangeBands([0, width]);
var mage = d3.max(data, function(d) { return d.age; });
var y = d3.scale.linear()
.domain([0,mage])
.range([height,0]);
svg.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", makeRect)
.attr("fill","orange")
.attr("rotate","90,0,0")
function makeRect(d,i) {
var x0 = x(i);
var y0 = y(d.age);
var x1 = x(i) + x.rangeBand();
var y1 = height;
var p1 = x0 + " " + y0;
var p2 = x0 + " " + y1;
var p3 = x1 + " " + y1;
var p4 = x1 + " " + y0;
var l = "L";
return "M"+p1+l+p2+l+p3+l+p4+"Z";
}
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("fill", "blue")
.attr("x", function(d,i) { return x(i) + 25; })
.attr("y", function(d) { return y(d.age/2); })
.text(function (d) {return d.name;})
});
我将留给您使用属性调整文本位置。
两个注意事项：
- 我删除了rect函数，因为它更清洁，可以直接使用rect。
- 您所要做的就是实现您想要的功能 反转
x()和y()值生成器函数。
var width = 500;
var height = 500;
var svg = d3.select("#graphic").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
d3.json('https://api.myjson.com/bins/jbdu6', function (data) {
var x = d3.scale.linear()
.range([0, width])
.domain([0, d3.max(data, function (d) {
return d.age;
})]);
var y = d3.scale.ordinal()
.rangeRoundBands([height, 0], .1)
.domain(data.map(function (d) {
return d.name;
}));
//make y axis to show bar names
var yAxis = d3.svg.axis()
.scale(y)
//no tick marks
.tickSize(0)
.orient("left");
var gy = svg.append("g")
.attr("class", "y axis")
.call(yAxis)
var bars = svg.selectAll(".bar")
.data(data)
.enter()
.append("g");
//append rects
bars.append("rect")
.attr("class", "bar")
.attr("y", function (d) {
return y(d.name);
})
.attr("fill","blue")
.attr("height", y.rangeBand())
.attr("x", 0)
.attr("width", function (d) {
return x(d.age);
});
bars.append("text")
.attr("class", "label")
//y position of the label is halfway down the bar
.attr("y", function (d, i) {
console.log();
return +(y(d.name) + y.rangeBand() / 2 + 4 );
})
//x position is 3 pixels to the right of the bar
.attr("x", function (d, i) {
return +x(d.age);
})
.attr("text-anchor",'start')
.attr('transform', (d) => {
console.log();
return `rotate(90 ${x(d.age) - 15} ${(y(d.name))})`
})
.attr('fill', '#FFF')
.text(function (d) {
return d.name;
});
});<html>
<head>
<title> Learning D3 Js</title>
</head>
<body>
<div id = "chart"></div>
<div id = "graphic"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"> </script>
</body>
</html>更新我认为这就是您想要的名称：
var margin = {top: 20, right: 100, bottom: 20, left: 10};
var width = 500 - margin.left,
height = 500 - margin.top - margin.bottom;
// var width = 500 - 50;
// var height = 500 - 50;
var svg = d3.select("#graphic").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json('https://api.myjson.com/bins/jbdu6', function (data) {
var x = d3.scale.linear()
.range([0, width - 100])
.domain([0, d3.max(data, function (d) {
return d.age;
})]);
var y = d3.scale.ordinal()
.rangeRoundBands([height, 0], .1)
.domain(data.map(function (d) {
return d.name;
}));
//make y axis to show bar names
var yAxis = d3.svg.axis()
.scale(y)
//no tick marks
.tickSize(0)
.orient("left");
var gy = svg.append("g")
.attr("class", "y axis")
.call(yAxis)
var bars = svg.selectAll(".bar")
.data(data)
.enter()
.append("g");
//append rects
bars.append("rect")
.attr("class", "bar")
.attr("y", function (d) {
return y(d.name);
})
.attr("fill","blue")
.attr("height", y.rangeBand())
.attr("x", 0)
.attr("width", function (d) {
return x(d.age);
});
bars.append("text")
.attr("class", "label")
//y position of the label is halfway down the bar
.attr("y", function (d, i) {
console.log();
return +(y(d.name) + y.rangeBand() / 2 + 4 );
})
//x position is 3 pixels to the right of the bar
.attr("x", function (d, i) {
return +x(d.age);
})
.attr("text-anchor",'start')
.text(function (d) {
return d.name;
});
});<html>
<head>
<title> Learning D3 Js</title>
</head>
<body>
<div id = "chart"></div>
<div id = "graphic"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"> </script>
</body>
</html>