Javascript 如何仅在x轴上显示工作日？_Javascript_Html_Css_D3.js_Svg

Javascript 如何仅在x轴上显示工作日？

javascript html css d3.js svg

Javascript 如何仅在x轴上显示工作日？,javascript,html,css,d3.js,svg,Javascript,Html,Css,D3.js,Svg,我正在尝试使用D3.js绘制一个散点连接图。该图使用JSON作为输入，显示2020年1月不同日期不同班次的人数。下面是我的代码 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Line Chart</title> <style> svg { font-fam

我正在尝试使用D3.js绘制一个散点连接图。该图使用JSON作为输入，显示2020年1月不同日期不同班次的人数。下面是我的代码

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Line Chart</title>
 <style>
   svg {
    font-family: Sans-Serif, Arial;
}
.line {
  stroke-width: 2;
  fill: none;
}

.axis path {
  stroke: black;
}

.text {
  font-size: 12px;
}

.title-text {
  font-size: 12px;
}
 </style>

</head>
<body>
<!-- partial:index.partial.html -->
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <div id="chart"></div>
  </body>
</html>
<!-- partial -->
  <script>

var data = [
  {
    name: "Regular",
    values: [
      {date: "2020-01-01", count: "2"},
      {date: "2020-01-02", count: "4"},
      {date: "2020-01-03", count: "8"},
      {date: "2020-01-04", count: "3"},
      {date: "2020-01-05", count: "5"}
    ]
  },
  {
    name: "Shift1",
    values: [
      {date: "2020-01-01", count: "2"},
      {date: "2020-01-02", count: "4"},
      {date: "2020-01-03", count: "8"},
      {date: "2020-01-04", count: "6"},
      {date: "2020-01-05", count: "1"}
    ]
  },
  {
    name: "Shift2",
    values: [
      {date: "2020-01-01", count: "3"},
      {date: "2020-01-02", count: "8"},
      {date: "2020-01-03", count: "4"},
      {date: "2020-01-04", count: "7"},
      {date: "2020-01-05", count: "6"}
    ]
  }
];

var width = 500;
var height = 300;
var margin = 50;
var duration = 250;

var lineOpacity = "0.25";
var lineOpacityHover = "0.85";
var otherLinesOpacityHover = "0.1";
var lineStroke = "1.5px";
var lineStrokeHover = "2.5px";

var circleOpacity = '0.85';
var circleOpacityOnLineHover = "0.25"
var circleRadius = 3;
var circleRadiusHover = 6;


/* Format Data */

var parseDate = d3.timeParse("%Y-%m-%d");
var formatTime = d3.timeFormat("%a");
data.forEach(function(d) { 
  d.values.forEach(function(d) {
    d.date = parseDate(d.date);
    d.count = +d.count;    
  });
});

/* Scale */
var xScale = d3.scaleTime()
  .domain(d3.extent(data[0].values, d => d.date))
  .range([0, width-margin]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data[0].values, d => d.count)])
  .range([height-margin, 0]);

var color = d3.scaleOrdinal(d3.schemeCategory10);

/* Add SVG */
var svg = d3.select("#chart").append("svg")
  .attr("width", (width+margin)+"px")
  .attr("height", (height+margin)+"px")
  .append('g')
  .attr("transform", `translate(${margin}, ${margin})`);


/* Add line into SVG */
var line = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.count));

let lines = svg.append('g')
  .attr('class', 'lines');

lines.selectAll('.line-group')
  .data(data).enter()
  .append('g')
  .attr('class', 'line-group')  
  .on("mouseover", function(d, i) {
      svg.append("text")
        .attr("class", "title-text")
        .style("fill", color(i))        
        .text(d.name)
        .attr("text-anchor", "middle")
        .attr("x", (width-margin)/2)
        .attr("y", 5);
    })
  .on("mouseout", function(d) {
      svg.select(".title-text").remove();
    })
  .append('path')
  .attr('class', 'line')  
  .attr('d', d => line(d.values))
  .style('stroke', (d, i) => color(i))
  .style('opacity', lineOpacity)
  .on("mouseover", function(d) {
      d3.selectAll('.line')
                    .style('opacity', otherLinesOpacityHover);
      d3.selectAll('.circle')
                    .style('opacity', circleOpacityOnLineHover);
      d3.select(this)
        .style('opacity', lineOpacityHover)
        .style("stroke-width", lineStrokeHover)
        .style("cursor", "pointer");
    })
  .on("mouseout", function(d) {
      d3.selectAll(".line")
                    .style('opacity', lineOpacity);
      d3.selectAll('.circle')
                    .style('opacity', circleOpacity);
      d3.select(this)
        .style("stroke-width", lineStroke)
        .style("cursor", "none");
    });


/* Add circles in the line */
lines.selectAll("circle-group")
  .data(data).enter()
  .append("g")
  .style("fill", (d, i) => color(i))
  .selectAll("circle")
  .data(d => d.values).enter()
  .append("g")
  .attr("class", "circle")  
  .on("mouseover", function(d) {
      d3.select(this)     
        .style("cursor", "pointer")
        .append("text")
        .attr("class", "text")
        .text(`${d.count}`)
        .attr("x", d => xScale(d.date) + 5)
        .attr("y", d => yScale(d.count) - 10);
    })
  .on("mouseout", function(d) {
      d3.select(this)
        .style("cursor", "none")  
        .transition()
        .duration(duration)
        .selectAll(".text").remove();
    })
  .append("circle")
  .attr("cx", d => xScale(d.date))
  .attr("cy", d => yScale(d.count))
  .attr("r", circleRadius)
  .style('opacity', circleOpacity)
  .on("mouseover", function(d) {
        d3.select(this)
          .transition()
          .duration(duration)
          .attr("r", circleRadiusHover);
      })
    .on("mouseout", function(d) {
        d3.select(this) 
          .transition()
          .duration(duration)
          .attr("r", circleRadius);  
      });


/* Add Axis into SVG */
var xAxis = d3.axisBottom(xScale).ticks(7);
var yAxis = d3.axisLeft(yScale).ticks(7);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", `translate(0, ${height-margin})`)
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append('text')
  .attr("y", 15)
  .attr("transform", "rotate(-90)")
  .attr("fill", "#000")
  .text("Total values");
  </script>

</body>
</html>


折线图
svg{
字体系列：无衬线，Arial；
}
.线路{
笔画宽度：2；
填充：无；
}
.轴路径{
笔画：黑色；
}
.文本{
字体大小：12px；
}
.标题文本{
字体大小：12px；
}
风险值数据=[
{
姓名：“普通”，
价值观：[
{日期：“2020-01-01”，计数：“2”}，
{日期：“2020-01-02”，计数：“4”}，
{日期：“2020-01-03”，计数：“8”}，
{日期：“2020-01-04”，计数：“3”}，
{日期：“2020-01-05”，计数：“5”}
]
},
{
名称：“Shift1”，
价值观：[
{日期：“2020-01-01”，计数：“2”}，
{日期：“2020-01-02”，计数：“4”}，
{日期：“2020-01-03”，计数：“8”}，
{日期：“2020-01-04”，计数：“6”}，
{日期：“2020-01-05”，计数：“1”}
]
},
{
名称：“Shift2”，
价值观：[
{日期：“2020-01-01”，计数：“3”}，
{日期：“2020-01-02”，计数：“8”}，
{日期：“2020-01-03”，计数：“4”}，
{日期：“2020-01-04”，计数：“7”}，
{日期：“2020-01-05”，计数：“6”}
]
}
];
var宽度=500；
var高度=300；
var保证金=50；
var持续时间=250；
var lineOpacity=“0.25”；
var lineOpacityHover=“0.85”；
var otherLinesOpacityHover=“0.1”；
var lineStroke=“1.5px”；
var linestrokehaver=“2.5px”；
var circleOpacity='0.85'；
var circleOpacityOnLineHover=“0.25”
循环变异系数=3；
var circleRadiusHover=6；
/*格式数据*/
var parseDate=d3.timeParse（“%Y-%m-%d”）；
var formatTime=d3.timeFormat（“%a”）；
data.forEach（函数（d）{
d、 值。forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 计数=+d.count；
});
});
/*鳞片*/
var xScale=d3.scaleTime（）
.domain（d3.extent（数据[0]。值，d=>d.date））
.范围（[0，宽度裕度]）；
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（数据[0]。值，d=>d.count）]）
.范围（[高度裕度，0]）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
/*添加SVG*/
var svg=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，“宽度+边距）+“px”）
.attr（“高度”，“高度+边距）+“px”）
.append（'g'）
.attr（“transform”，`translate（${margin}，${margin}）`）；
/*将行添加到SVG中*/
var line=d3.line（）
.x（d=>xScale（d.date））
.y（d=>yScale（d.count））；
让line=svg.append（'g'）
.attr（“类”、“行”）；
行。选择全部（“.行组”）
.data（data）.enter（）
.append（'g'）
.attr（'class'，'line group'）
.on（“鼠标悬停”，功能（d，i）{
svg.append（“文本”）
.attr（“类”、“标题文本”）
.样式（“填充”，颜色（i））
.文本（d.名称）
.attr（“文本锚定”、“中间”）
.attr（“x”，（宽度边距）/2）
.attr（“y”，5）；
})
.开启（“鼠标出”，功能（d）{
选择（“.title text”）.remove（）；
})
.append（'路径'）
.attr（'类'，'行'）
.attr（'d'，d=>行（d.values））
.style（'笔划'，（d，i）=>颜色（i））
.style（'opacity'，lineOpacity）
.on（“鼠标悬停”，功能（d）{
d3.选择全部（“.line”）
.style（'opacity'，otherLinesOpacityHover）；
d3.选择全部（“.circle”）
.style（'opacity'，circleopacityOnline悬停）；
d3.选择（本）
.style（'opacity'，lineOpacityHover）
.style（“笔划宽度”，线条笔划悬停）
.样式（“光标”、“指针”）；
})
.开启（“鼠标出”，功能（d）{
d3.选择全部（“.行”）
.样式（“不透明度”，线条不透明度）；
d3.选择全部（“.circle”）
.样式（“不透明度”，圆形容量）；
d3.选择（本）
.style（“笔划宽度”，线条笔划）
.样式（“光标”、“无”）；
});
/*在行中添加圆*/
行。选择全部（“圆形组”）
.data（data）.enter（）
.附加（“g”）
.style（“填充”（d，i）=>颜色（i））
.selectAll（“圆圈”）
.data（d=>d.values）。输入（）
.附加（“g”）
.attr（“类”、“圈”）
.on（“鼠标悬停”，功能（d）{
d3.选择（本）
.style（“光标”、“指针”）
.append（“文本”）
.attr（“类”、“文本”）
.text（`${d.count}`）
.attr（“x”，d=>xScale（d.date）+5）
.attr（“y”，d=>yScale（d.count）-10）；
})
.开启（“鼠标出”，功能（d）{
d3.选择（本）
.style（“光标”、“无”）
.transition（）
.持续时间（持续时间）
.selectAll（“.text”）.remove（）；
})
.附加（“圆圈”）
.attr（“cx”，d=>xScale（d.date））
.attr（“cy”，d=>yScale（d.count））
.attr（“r”，circleRadius）
.style（'opacity'，circleOpacity）
.on（“鼠标悬停”，功能（d）{
d3.选择（本）
.transition（）
.持续时间（持续时间）
.attr（“r”，circleRadiusHover）；
})
.开启（“鼠标出”，功能（d）{
d3.选择（本）
.transition（）
.持续时间（持续时间）
.attr（“r”，circleRadius）；
});
/*将Axis添加到SVG中*/
var xAxis=d3.axisBottom（xScale）.ticks（7）；
var yAxis=d3.axisLeft（yScale）.ticks（7）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“transform”，`translate（0，${height margin}）`）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（'文本'）
.attr（“y”，15）
.attr（“变换”、“旋转（-90）”）
.attr（“填充”、“千”）
.文本（“总价值”）；

我不知道如何只获取x轴上的工作日，如周一、周二等，而不在其间显示月份

提前感谢

您需要调用

tickFormat

函数传递所需的

时间格式

var xAxis = d3.axisBottom(xScale)
            .tickFormat(d3.timeFormat("%a"))
            .ticks(7);

工作示例（可能不是您想要的，但应该向您展示如何控制轴标签）

var数据=[
{
姓名：“普通”，
价值观：[
{日期：“2020-01-01”，计数：“2”}，
{日期：“2020-01-02”，计数：“4”}，
{日期：“2020-01-03”，计数：“8”}，
{日期：“2020-01-04”，计数：“3”}，
{日期：“2020-01-05”，计数：“5”}
]
},
{
名称：“Shift1”，
价值观：[
{日期：