折线图
const dataSet = [{
country: 'China',
group: [20, 40, 80, 30, 50, 60, 70, 20, 40, 80, 30, 50, 60, 70, 30]
}, {
country: 'English',
group: [60, 50, 60, 70, 20, 40, 80, 30, 50, 40, 120, 30]
}, {
country: 'Japan',
group: [60, 60, 70, 120, 40, 80, 30, 50, 60, 72, 40, 20]
}];
const width = 700, height = 500, padding = {top: 60, left: 30};
const svg = d3.select("body").append("svg").attr("width", width + padding.left * 2).attr("height", height + padding.top * 2);
const xScale = d3.scale.ordinal().domain(d3.range(R.pipe(R.sort(function (pre, cur) {
return cur.group.length - pre.group.length;
}), R.head, R.prop("group"), R.length)(dataSet))).rangeRoundBands([0, width], .3);
var getLinearScale = R.pipe(R.sort(function (pre, cur) {
return d3.max(cur.group) - d3.max(pre.group);
}), R.head, R.prop("group"), d3.max);
const yScale = d3.scale.linear().domain([0, getLinearScale(dataSet)]).range([height, 0]);
const xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(8);
const yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(8);
const color = d3.scale.category10();
svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + (height + padding.top) + ")").call(xAxis);
svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + padding.top + ")").call(yAxis);
const linePath = d3.svg.line().interpolate("basis").x(function (d, i) {
console.log(xScale(i) + padding.left + xScale.rangeBand() / 2);
return xScale(i) + padding.left + xScale.rangeBand() / 2;
}).y(function (d) {
return yScale(d) + padding.top;
});
svg.append("g").attr("class", "line").selectAll("path").data(dataSet).enter().append("path").attr("d", function (d) {
return linePath(d.group);
}).attr("fill", "none").attr("stroke", function (d, i) {
return color(i);
}).attr("stroke-width", 2);
// 此处为了练习符号生成器使用了symbol以及定义了它的type,size访问器 **实际表图中建议使用rect**
const symbolPath = d3.svg.symbol()
.type(function (d) {
return d3.svg.symbolTypes[d];
}).size(180);
svg.append("g").attr("class", "symbol").selectAll("path").data(dataSet).enter().append("path").attr("d", function (d, i) {
return symbolPath(i)
// 因为path是路径元素 没有高宽 没法用x y来定位 只能用transform来移动
}).attr("transform", function (d, i) {
return "translate(" + ((i * 100) + padding.left + 30) + "," + (height + padding.top * 1.6) + ")";
}).attr("fill", function (d, i) {
return color(i);
});
svg.append("g").attr("class", "text").selectAll("text").data(dataSet).enter().append("text").text(function (d, i) {
return d.country;
}).attr("transform", function (d, i) {
return "translate(" + ((i * 100) + padding.left + 70) + "," + (height + padding.top * 1.6) + ")";
}).attr("dy", 5).attr("fill", function (d, i) {
return color(i);
}).attr("text-anchor", "middle");
结果:
折线图
