Гистограмма React D3, прокручиваемая ось X
Когда дело касается D3, я новичок. В настоящее время я изо всех сил пытаюсь реализовать гистограмму, которая позволяет пользователю прокручивать по оси x, в то время как ось Y остается на месте. В качестве фреймворка я использую React.
export default [
{ activity: 'Main Idea and Detail', value: 90, color: '#2A78E4' },
{ activity: 'Character and Plot', value: 80, color: '#2A78E4' },
{ activity: 'Elements of Poetry', value: 70, color: '#2A78E4' },
{ activity: 'Standard 8.10', value: 60, color: '#2A78E4' },
{ activity: '8.1.3', value: 50, color: '#2A78E4' },
{ activity: 'Skill 6', value: 40, color: '#2A78E4' },
{ activity: 'Skill 7', value: 30, color: '#2A78E4' },
{ activity: 'Skill 8', value: 21, color: '#2A78E4' },
{ activity: 'Skill 9', value: 10, color: '#2A78E4' },
{ activity: 'Skill 10', value: 5, color: '#2A78E4' },
{ activity: '8.1.34', value: 50, color: '#2A78E4' },
{ activity: 'Skill 60', value: 40, color: '#2A78E4' },
{ activity: 'Skill 70', value: 30, color: '#2A78E4' },
{ activity: 'Skill 80', value: 21, color: '#2A78E4' },
{ activity: 'Skill 90', value: 10, color: '#2A78E4' },
{ activity: 'Skill 100', value: 5, color: '#2A78E4' },
{ activity: 'Skill 900', value: 100, color: '#2A78E4' },
{ activity: 'Skill 1000', value: 50, color: '#2A78E4' },
{ activity: 'Skill -1', value: 5, color: '#2A78E4' },
{ activity: '8.1.35', value: 50, color: '#2A78E4' },
{ activity: 'Skill 160', value: 40, color: '#2A78E4' },
{ activity: 'Skill 10', value: 30, color: '#2A78E4' },
{ activity: 'Skill 20', value: 21, color: '#2A78E4' },
{ activity: 'Skill 80', value: 10, color: '#2A78E4' },
{ activity: 'Skill 650', value: 5, color: '#2A78E4' },
{ activity: 'Skill 300', value: 100, color: '#2A78E4' },
{ activity: 'Skill 3000', value: 50, color: '#2A78E4' }
];
Мой код, который я использую для создания своих весов:
generateScales = () => {
const { height, margin, width } = this.state;
const xScales = d3
.scaleBand()
.domain(this.props.data.map(d => d.activity))
.range([margin.left, width - margin.right])
.padding(0.5);
const yScales = d3
.scaleLinear()
.domain([0, 100])
.range([height - margin.bottom, 0]);
this.setState({
xScales,
yScales
});
};
Для создания своих весов я использую функцию renderAxis:
renderAxis = () => {
const xAxisBottom = d3.axisBottom().scale(this.state.xScales);
const axisLeft = d3.axisLeft().scale(this.state.yScales);
d3.select(this.refs.xAxis).call(xAxisBottom);
d3.select(this.refs.yAxis).call(axisLeft);
};
Я пытался использовать этот пример в качестве подсказки, но мне не удалось заставить эту строку правильно работать "d3.behavior.drag (). On (" drag ", display)" http://bl.ocks.org/cdagli/ce3045197f4b89367c80743c04bbb4b6.
Я получаю сообщение об ошибке, что это не часть модуля d3, но в примере явно используется. Думаю, я не знаю, с чего начать и как решить эту проблему. Я пытался решить это также с помощью css, но безуспешно
Мне удалось создать песочницу, и если кто-нибудь может дать мне подсказку о том, как добиться прокручиваемой оси X, оставив ось Y на месте, это будет очень признательно.
Ответы 1
Я решил свою проблему, предоставив своим весам правильные данные. Моя ошибка заключалась в том, что я думал, что могу просто произвольно вставить любое число и получить правильные координаты. Для моей конкретной ситуации я должен скормить весам правильные данные.
Итак, для моей данной модели данных:
export default [
{ activity: 'Main Idea and Detail', value: 10, color: '#2A78E4' },
{ activity: 'Character and Plot', value: 20, color: '#2A78E4' },
{ activity: 'Elements of Poetry', value: 31, color: '#2A78E4' },
{ activity: 'Skill 4', value: 40, color: '#2A78E4' },
{ activity: 'Skill 5', value: 56, color: '#2A78E4' },
{ activity: 'Skill 6', value: 60, color: '#2A78E4' },
{ activity: 'Skill 7', value: 60, color: '#2A78E4' },
{ activity: 'Skill 8', value: 71, color: '#2A78E4' },
{ activity: 'Skill 9', value: 70, color: '#2A78E4' },
{ activity: 'Skill 10', value: 90, color: '#2A78E4' }
];
Я должен настроить ось X для моей активности, выполнив следующие действия:
d3.line()
.x((info, index) => {
return xScales(info.activity);
})
Теперь, когда d3 знает мою ось x, я могу установить для Y любое значение, если оно не превышает 100, что является вершиной оси Y.
Итак, моя ось Y теперь выглядит так:
.y(data => {
return yScales(baseLine - 1.2);
});
И мой путь выглядит так:
<path
d = {path(data)}
x = {70}
className = "line"
style = {{ fill: 'green', strokeWidth: 2, stroke: 'red' }}
/>
Я надеюсь, что это имеет смысл и поможет тому, кто пытается создать горизонтальную линию для гистограмм.