Javascript d3.js中的tickValues（）

我正在以下一种方式构建图表：

但有两件事我不明白：

• 正如您在上所看到的，17.03和18.03没有数据（它是 周末），那么有没有办法不在xAxis上显示勾号 没有数据吗？我是说xAxis蜱应该是 ...15.03-16.03-19.03-20.03... 三月十七号和十八号
  X轴刻度值应为DD.MM格式的日期，且仅限于 在数据数组中表示
  换句话说 如果我的数据数组中有10个元素，那么10个记号应该是（现在是12） 滴答声）。我认为我应该使用tickValues（）而不是ticks（）， 但我完全不知道如何以正确的方式实施它

• 我还有一些日期过滤器。我还需要知道有没有办法 下一步：
  我们看到的所有时间，例如月份图表（在JSFIDLE案例中）都是从12.03开始的 到23.03），连接点的线为绿色。如果我们“过滤” e、 上周（3月19日至25日）-我的意思是我们通过过滤功能 其构建图开始日期为2018年3月19日，结束日期为2018年3月25日）， 因此，在图表上，从19.03到23.03的这一段变为红色。 差不多

我用叉子叉好并调整好。我的编辑并不完美，但我认为他们回答了你的问题，让你走上了正确的轨道

换句话说，如果我的数据数组中有10个元素，那么就有10个记号 应该是（现在是12个刻度）。我认为我应该使用tickValues（）而不是 ticks（），但完全不了解如何正确地实现它 对

是的！你在正确的轨道上

tickValues（）

将允许您指定精确的刻度

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

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

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

我们看到的所有时间，例如月份图表（在JSFIDLE案例中）都是从12.03到 23.03），连接点的线为绿色。如果我们“过滤”，例如上周（3月19-25日）-过滤，我的意思是我们传递给哪个函数 建立图表起始日期（如2018年3月19日和2018年3月25日），依此类推 该段从19.03到23.03的图表变为红色。某物 像

我从他那里得到了一个暗示。这里的基本思想是创建单独的行，每个行都过滤到您希望为其着色的数据

我的叉形小提琴中的实现只是让您知道可以做些什么。我想你可以让它更有活力

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");

const splitDate=数据[6]。日期；
追加（“路径”）
.attr（“d”，行（data.filter（d=>d.date d.date>=splitDate）））
.attr（“笔划”、“红色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）；

完整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);
    }

let数据=[
{“日期”：“2018-03-12”，“健康”：93，“风险”：10，“事件”：0}，
{“日期”：“2018-03-13”，“健康”：80，“风险”：5，“事件”：2}，
{“日期”：“2018-03-14”，“健康”：40，“风险”：1，“事件”：5}，
{“日期”：“2018-03-15”，“健康”：90，“风险”：5，“事件”：6}，
{“日期”：“2018-03-16”，“健康”：12，“风险”：12，“事故”：7}，
{“日期”：“2018-03-19”，“健康”：100，“风险”：11，“事故”：1}，
{“日期”：“2018-03-20”，“健康”：93，“风险”：8，“事件”：5}，
{“日期”：“2018-03-21”，“健康”：64，“风险”：9，“事故”：6}，
{“日期”：“2018-03-22”，“健康”：55，“风险”：7，“事件”：12}，
{“日期”：“2018-03-23”，“健康”：100，“风险”：9，“事件”：12}，
]
常量ticksNumber=data.length；
var tickValues=data.map（函数（d）{返回时刻（d.date，'YYYY-MM-DD'）。格式（'DD.MM'）；}）；
常量边距={顶部：19，右侧：16，底部：29，左侧：16}；
常量宽度=800-margin.left-margin.right；
常量高度=96-margin.top-margin.bottom；
const parseDate=d3.timeParse（“%Y-%m-%d”）；
常量formatTime=d3.timeFormat（“%d.%m”）；
const tickValuesForAxis=data.map（d=>parseDate（d.date））；
常量x=d3.scaleTime（）.range（[0，宽度]）；
常数y=d3.scaleLinear（）.range（[height-5，0]）；
var xAxis=d3.axisBottom（x）
.tickValues（tickValuesForAxis）
.d格式（函数（d）{
返回时间（d）；
});
var yAxis=d3.轴左（y）；
设line=d3.line（）
.x（函数（d）{返回x（d.date）；}）
.y（函数（d）{返回y（d.health）；}）
.曲线（d3.曲线中心）；
//x轴函数中的网格线
函数make_x_gridlines（）{
返回d3.axisBottom（x）
.滴答声（滴答声）
}
让svg=d3.选择（'#viz'）
.append（'svg'）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
});
//建立x轴和y轴的域
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 域（d3.extent（数据，函数（d）{返回d.health；}））；
var axisNode=svg.append（'g'）
.attr（'class'，'x轴'）
.attr（'transform'，'translate（0'，+height+'））
.呼叫（xAxis）；
axisNode.selectAll（'text'）。每个（函数（）{
if（this.textContent&！tickValues.includes（this.textContent））{
这个.classList.add（“休息日”）；
}
});
//添加X网格线
svg.append（“g”）
.attr（“类”、“网格”）
.attr（'stroke'，'#d2e3ed'）
.attr（'stroke-opacity'，0.1）
.attr（“变换”、“平移（-0.5“+高度+”））
.打电话(
制作网格线（）
.1尺寸（高度）
.tick格式（“”）
);
//定义工具提示的div
var div=d3。选择（'body'）。追加（“div”）
.attr（“类”、“工具提示”）
.style（“不透明度”，1）
.style（“长方体阴影”、“0 0 1px rgba（204、204、204、0.24）”）；
/*svg.append（'path'）.datum（数据）
.attr（'类'，'行'）
.attr（'d'，行）
.attr（'stroke'，'35b37e'）
.attr（'stroke-width'，'2'）
.attr（'fill'，'none'）*/
const splitDate=数据[6]。日期；
追加（“路径”）
.attr（“d”，行（data.filter（d=>d.date d.date>=splitDate）））
.attr（“笔划”、“红色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）；
svg.selectAll（“点”）
.数据（数据）
.enter（）.append（“圆”）
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);
    }