D3.js v5.0折れ線グラフ
26208 ワード
#折れ線グラフ
export default function CountyLC(id,dataset) {
const width = 400;
const height = 400;
const svg = d3
.select(id)
.append('svg')
.attr('width', width)
.attr('height', height)
.style('border', '1px dashed #ccc');
const color = d3.scaleOrdinal(d3.schemeCategory10);
const padding = { left: 50, right: 30, top: 20, bottom: 20 };
const xScale = d3 // x
.scaleBand()
.domain(d3.range(dataset.length))
.range([0, width - padding.left - padding.right]);
const yScale = d3 // y
.scaleLinear()
.domain([0, d3.max(dataset)])
.range([width - padding.top - padding.bottom, 0]);
// x
svg
.append('g')
.attr('transform', `translate(${padding.left},${height - padding.bottom})`)
.call(d3.axisBottom(xScale));
// y
svg
.append('g')
.attr('transform', `translate(${padding.left},${padding.top})`)
.call(d3.axisLeft(yScale));
//
const ss = svg
.selectAll('.line')
.data(dataset)
.enter()
.append('line')
.attr('style', 'stroke:red')
.attr('curve', 'curve')
.attr('transform', `translate(${padding.left},${padding.bottom})`)
.attr('x1', (_, i) => {
return xScale(i) + xScale.step() / 2;
})
.attr('y1', d => {
return yScale(d);
})
.attr('x2', (_, i) => {
return i + 1 < dataset.length
? xScale(i + 1) + xScale.step() / 2
: xScale(i) + xScale.step() / 2;
})
.attr('y2', (_, i) => {
return i + 1 < dataset.length ? yScale(dataset[i + 1]) : yScale(dataset[i]);
});
const line = d3.line().curve(d3.curveCatmullRom.alpha(0));
line(ss);
//
svg
.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('transform', `translate(${padding.left},${padding.bottom})`)
.attr('cx', function(d, i) {
return xScale(i) + xScale.step() / 2;
})
.attr('cy', function(d) {
return yScale(d);
})
.attr('r', 5)
.attr('fill', (_, i) => color(i));
//
svg
.selectAll('MyText')
.data(dataset)
.enter()
.append('text')
.attr('fill', 'black')
.attr('transform', `translate(${padding.left},${padding.top})`)
.attr('x', (_, i) => {
return xScale(i) + xScale.step() / 2;
})
.attr('y', d => {
return yScale(d);
})
.text(function(d) {
return d;
});
}
```
![ ](https://img-blog.csdnimg.cn/20190530110533511.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzc3MDA1,size_16,color_FFFFFF,t_70)