Question

我是d3的新手，我正在尝试使用序数x轴绘制地图，例如对于这个数据

{cat: 10, dog: 3, pig: 7, bird: 7}

我想在x轴上显示猫，狗，猪，鸟以及在y轴上显示相应的数字。

我正在尝试使用d3.line()函数，但有点混淆了为x参数发送的内容。

Answer 1

将您的数据结构更改为以下内容：

var data = [{
    name: "cat",
    value: 10
}, {
    name: "dog",
    value: 3
}, {
    name: "pig",
    value: 7
}, {
    name: "bird",
    value: 7
}];

这样，您可以定义线生成器（查看演示以查看这些比例是什么）：

var line = d3.line()
    .x(function(d) {
        return xScale(d.name)
    })
    .y(function(d) {
        return yScale(d.value)
    });

因此，x参数是name变量的定性值，而y是value变量的定量值。

这里重要的一点是：如果你使用x轴的定性变量，设置一个定性比例来处理那个定性变量，并将这种比例的回报传递给线生成器。

以下是演示：

var data = [{
    name: "cat",
    value: 10
}, {
    name: "dog",
    value: 3
}, {
    name: "pig",
    value: 7
}, {
    name: "bird",
    value: 7
}];

var width = 500,
    height = 200;

var svg = d3.selectAll("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var xScale = d3.scalePoint()
    .domain(data.map(function(d) {
        return d.name
    }))
    .range([50, width - 50])
    .padding(0.5);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) {
        return d.value
    }) * 1.1])
    .range([height - 50, 10]);

var line = d3.line()
	.x(function(d){ return xScale(d.name)})
	.y(function(d){ return yScale(d.value)});
	
svg.append("path")
	.attr("d", line(data))
	.attr("stroke", "teal")
	.attr("stroke-width", "2")
	.attr("fill", "none");

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

svg.append("g").attr("transform", "translate(0,150)")
    .attr("class", "xAxis")
    .call(xAxis);

svg.append("g")
    .attr("transform", "translate(50,0)")
    .attr("class", "yAxis")
    .call(yAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>

带有序数x轴的javascript d3折线图

1 个答案: