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

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>