Как я могу получить только рабочие дни по оси X? - PullRequest
Новая
       13

Как я могу получить только рабочие дни по оси X?

0 голосов
/ 27 апреля 2020

Я пытаюсь построить график, используя D3. js. График использует JSON в качестве входных данных для отображения цен товаров в разные даты января 2020 года. Ниже приведен мой код. 

<!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: "Finance and insurance",
    values: [
      {date: "2020-01-01", price: "2"},
      {date: "2020-01-02", price: "4"},
      {date: "2020-01-03", price: "8"},
      {date: "2020-01-04", price: "3"},
      {date: "2020-01-05", price: "5"},
      {date: "2020-01-06", price: "7"},
      {date: "2020-01-07", price: "6"},
      {date: "2020-01-08", price: "8"},
      {date: "2020-01-09", price: "6"},
      {date: "2020-01-10", price: "8"}
    ]
  },
  {
    name: "Information",
    values: [
      {date: "2020-01-01", price: "2"},
      {date: "2020-01-02", price: "4"},
      {date: "2020-01-03", price: "8"},
      {date: "2020-01-04", price: "6"},
      {date: "2020-01-05", price: "1"},
      {date: "2020-01-06", price: "7"},
      {date: "2020-01-07", price: "3"},
      {date: "2020-01-08", price: "3"},
      {date: "2020-01-09", price: "5"},
      {date: "2020-01-10", price: "3"}
    ]
  },
  {
    name: "Transfers and Remitance",
    values: [
      {date: "2020-01-01", price: "3"},
      {date: "2020-01-02", price: "8"},
      {date: "2020-01-03", price: "4"},
      {date: "2020-01-04", price: "7"},
      {date: "2020-01-05", price: "6"},
      {date: "2020-01-06", price: "3"},
      {date: "2020-01-07", price: "3"},
      {date: "2020-01-08", price: "8"},
      {date: "2020-01-09", price: "5"},
      {date: "2020-01-10", price: "3"}
    ]
  },
  {
    name: "Lending",
    values: [
      {date: "2020-01-01", price: "3"},
      {date: "2020-01-02", price: "7"},
      {date: "2020-01-03", price: "4"},
      {date: "2020-01-04", price: "5"},
      {date: "2020-01-05", price: "8"},
      {date: "2020-01-06", price: "4"},
      {date: "2020-01-07", price: "6"},
      {date: "2020-01-08", price: "8"},
      {date: "2020-01-09", price: "2"},
      {date: "2020-01-10", price: "7"}
    ]
  },
  {
    name: "Other Services",
    values: [
      {date: "2020-01-01", price: "6"},
      {date: "2020-01-02", price: "8"},
      {date: "2020-01-03", price: "4"},
      {date: "2020-01-04", price: "6"},
      {date: "2020-01-05", price: "2"},
      {date: "2020-01-06", price: "8"},
      {date: "2020-01-07", price: "6"},
      {date: "2020-01-08", price: "7"},
      {date: "2020-01-09", price: "8"},
      {date: "2020-01-10", price: "4"}
    ]
  }
];

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.price = +d.price;    
  });
});

/* 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.price)])
  .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.price));

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.price}`)
        .attr("x", d => xScale(d.date) + 5)
        .attr("y", d => yScale(d.price) - 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.price))
  .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>

, и я получаю следующий вывод

enter image description here

Теперь я сталкиваюсь с двумя проблемами

  1. Я не знаю, как получить только рабочие дни по оси x, такие как Mon, Tue, et c без Даты.
  2. После субботы, почему мой график показывает январь?

Спасибо за помощь

...