gpt4 book ai didi

javascript - d3.js 中的 tickValues()

转载 作者:行者123 更新时间:2023-12-03 02:11:00 24 4
gpt4 key购买 nike

我正在以下面的方式构建我的图表:see Fiddle

const margin = { top: 19, right: 16, bottom: 29, left: 16 };
const width = 800 - margin.left - margin.right;
const height = 96 - margin.top - margin.bottom;

const parseDate = d3.timeParse("%Y-%m-%d");
const formatTime = d3.timeFormat("%d.%m");

const x = d3.scaleTime().range([0, width]);
const y = d3.scaleLinear().range([height - 5, 0]);

var xAxis = d3.axisBottom(x)
.tickFormat(function (d) {
//console.log(d)
return formatTime(d);
}).ticks(ticksNumber);

var yAxis = d3.axisLeft(y);

//establish the domain for x and y axes
x.domain(d3.extent(data, function (d) { return d.date; }));
y.domain(d3.extent(data, function (d) { return d.health; }));

var axisNode = svg.append('g')
.attr('class', 'x-axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);

但我无法理解一些事情:

  • 正如您所看到的,17.03 和 18.03 没有数据(它是 周末),那么有没有办法不显示 xAxis 上的勾号(如果有) 是没有数据吗?我的意思是 xAxis 刻度应该是 ...15.03-16.03-19.03-20.03...3 月 17 号和 18 号。

    X 轴刻度值应为 DD.MM 格式的日期,并且仅适用于那些它以数据数组表示。

    另外一句话 如果我的数据数组中有 10 个元素,那么应该是 10 个刻度(现在是 12 蜱)。我认为我应该使用 tickValues() 而不是 ticks(), 但完全不明白如何以正确的方式实现它。

  • 我还有一些日期过滤器。我还需要知道有没有办法下一步:

    我们看到的所有时间,例如月份图表(在 jsfiddle 情况下日期为 12.03到 23.03),连接点的线为绿色。如果我们“过滤”例如上周(3 月 19-25 日)- 过滤器我的意思是我们传递给函数构建图表 startDate 如 19-03-2018 和 endDate 25-03-2018),因此,在图表上,从 19.03 到 23.03 的这一段就变成了红色的。类似于 enter image description here

最佳答案

我 fork 并调整了your fiddle 。我的编辑并不完美,但我认为它们回答了您的问题并让您走上正轨。

Another words if I have 10 elements in my data array so 10 ticks should be (now 12 ticks). I think than I should use tickValues() not ticks(), but totally do not understand how to implement it in right way.

是的!你走在正确的轨道上。 tickValues() 将让您指定准确的刻度。

const tickValuesForAxis = data.map(d => parseDate(d.date));

var xAxis = d3.axisBottom(x)
.tickValues(tickValuesForAxis)
.tickFormat(function (d) {
return formatTime(d);
});

Also I got some date filters. And I also need to know is there a way to make next:

All time we saw e.g. month chart (in jsfiddle case dates from 12.03 to 23.03), the line which connect points is green. If we "filter" e.g. last week (19-25 of March) - filter I mean we pass to function which build chart startDate like 19-03-2018 and endDate 25-03-2018), so on the chart this segment from 19.03 to 23.03 becomes e.g. red. Something like

我从 this previously asked question 得到了提示。这里的基本思想是创建单独的行,每行都过滤为您希望为其着色的数据。

我的 forked fiddle 中的实现只是让您了解可以做什么。我认为你可以让它变得更加动态。

const splitDate = data[6].date;

svg.append("path")
.attr("d", line(data.filter(d => d.date <= splitDate )))
.attr("stroke",'#35b37e')
.attr("stroke-width", 2)
.attr("fill", "none");

svg.append("path")
.attr("d", line(data.filter(d => d.date >= splitDate )))
.attr("stroke", "red")
.attr("stroke-width", 2)
.attr("fill", "none");

完整的 JS:

let data = [
{"date": "2018-03-12", "health": 93, "risks": 10, "incidents": 0},
{"date": "2018-03-13", "health": 80, "risks": 5, "incidents": 2},
{"date": "2018-03-14", "health": 40, "risks": 1, "incidents": 5},
{"date": "2018-03-15", "health": 90, "risks": 5, "incidents": 6},
{"date": "2018-03-16", "health": 12, "risks": 12, "incidents": 7},
{"date": "2018-03-19", "health": 100, "risks": 11, "incidents": 1},
{"date": "2018-03-20", "health": 93, "risks": 8, "incidents": 5},
{"date": "2018-03-21", "health": 64, "risks": 9, "incidents": 6},
{"date": "2018-03-22", "health": 55, "risks": 7, "incidents": 12},
{"date": "2018-03-23", "health": 100, "risks": 9, "incidents": 12},
]

const ticksNumber = data.length;
var tickValues = data.map(function (d) { return moment(d.date, 'YYYY-MM-DD').format('DD.MM'); });

const margin = { top: 19, right: 16, bottom: 29, left: 16 };
const width = 800 - margin.left - margin.right;
const height = 96 - margin.top - margin.bottom;

const parseDate = d3.timeParse("%Y-%m-%d");
const formatTime = d3.timeFormat("%d.%m");

const tickValuesForAxis = data.map(d => parseDate(d.date));

const x = d3.scaleTime().range([0, width]);
const y = d3.scaleLinear().range([height - 5, 0]);

var xAxis = d3.axisBottom(x)
.tickValues(tickValuesForAxis)
.tickFormat(function (d) {
return formatTime(d);
});

var yAxis = d3.axisLeft(y);

let line = d3.line()
.x(function (d) { return x(d.date); })
.y(function (d) { return y(d.health); })
.curve(d3.curveCardinal);

// gridlines in x axis function
function make_x_gridlines() {
return d3.axisBottom(x)
.ticks(ticksNumber)
}

let svg = d3.select('#viz')
.append('svg')
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
data.forEach(function (d) {
d.date = parseDate(d.date);
});

//establish the domain for x and y axes
x.domain(d3.extent(data, function (d) { return d.date; }));
y.domain(d3.extent(data, function (d) { return d.health; }));

var axisNode = svg.append('g')
.attr('class', 'x-axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);

axisNode.selectAll('text').each(function () {
if (this.textContent && !tickValues.includes(this.textContent)) {
this.classList.add("day-off");
}
});

// add the X gridlines
svg.append("g")
.attr("class", "grid")
.attr('stroke', '#d2e3ed')
.attr('stroke-opacity', 0.1)
.attr("transform", "translate(-0.5," + height + ")")
.call(
make_x_gridlines()
.tickSize(-height)
.tickFormat("")
);


// Define the div for the tooltip
var div = d3.select('body').append("div")
.attr("class", "tooltip")
.style("opacity", 1)
.style("box-shadow", "0 0 0 1px rgba(204, 204, 204, 0.24)");

/* svg.append('path').datum(data)
.attr('class', 'line')
.attr('d', line)
.attr('stroke', '#35b37e')
.attr('stroke-width', '2')
.attr('fill', 'none'); */

const splitDate = data[6].date;

svg.append("path")
.attr("d", line(data.filter(d => d.date <= splitDate )))
.attr("stroke",'#35b37e')
.attr("stroke-width", 2)
.attr("fill", "none");

svg.append("path")
.attr("d", line(data.filter(d => d.date >= splitDate )))
.attr("stroke", "red")
.attr("stroke-width", 2)
.attr("fill", "none");

svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr('stroke', '#35b37e')
.attr('stroke-width', '2')
.attr('fill', '#f7f8f9')
.attr("cx", function (d) { return x(d.date); })
.attr("cy", function (d) { return y(d.health); })
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut)
.style("opacity", 0);

function handleMouseOver(d, i) {
d3.select(this).style("opacity", 1);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(moment(d.date).format("DD MMM YYYY") + "<br/>" +
"Health: " + d.health + "<br/>" +
"Risks: " + d.risks + "<br/>" +
"Incidents: " + d.incidents)
.style("left", (d3.event.pageX - 60) + "px")
.style("top", (d3.event.pageY - 115) + "px");
}

function handleMouseOut(d, i) {
d3.select(this).style("opacity", 0);
div.transition()
.duration(500)
.style("opacity", 0);
}

关于javascript - d3.js 中的 tickValues(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49575170/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com