javascript - d3.js 在线聊天网格问题

Question

我是 d3 库的新手，我制作了一个包含网格的折线图。我在减少网格线长度以使它们可以与 x 轴和 y 轴线的长度匹配时遇到困难。

代码链接:https://codepen.io/liot/pen/yLYyRZj

<强> Line chart Image highlighting extra length of grid lines :

下面是我的代码

const data = [
 { date: "01/01/2016", value: 10000 },
 { date: "01/02/2016", value: 20000 },
 { date: "01/03/2016", value: 40000 },
 { date: "01/04/2016", value: 30000 },
 { date: "01/05/2016", value: 30000 }
];
const width = 600;
const height = 400;
const margin = { top: 10, right: 40, bottom: 40, left: 70 };
const parseDate = d3.timeParse("%m/%d/%Y");
const xFormat = "%d-%b";
const yMax = d3.max(data, (d) => d.value);

const x = d3
 .scaleTime()
 .domain(d3.extent(data, (d) => parseDate(d.date)))
 .rangeRound([margin.left, width - margin.right])
 .nice(data.length);
const y = d3
 .scaleLinear()
 .domain([0, yMax < 10 ? 10 : yMax])
 .range([height - margin.bottom, margin.top])
 .nice();
const xAxis = (g) =>
 g
   .style("font-size", "15px")
   .style("color", "#424242")
   .attr("transform", `translate(0,${height - margin.bottom})`)
   .call(d3.axisBottom(x).tickFormat(d3.timeFormat(xFormat)).ticks(d3.timeDay))
   .call((g) => g.select(".domain"))
   .call((g) =>
     g
       .selectAll(".tick line")
       .clone()
       .attr("y2", -height)
       .attr("stroke-opacity", 0.2)
   );
const yAxis = (g) =>
 g
   .style("font-size", "15px")
   .style("color", "#424242")
   .attr("transform", `translate(${margin.left},0)`)
   .call(d3.axisLeft(y))
   .call((g) => g.select(".domain"))
   .call((g) =>
     g
       .selectAll(".tick line")
       .clone()
       .attr("x2", width)
       .attr("stroke-opacity", 0.2)
   );
const line = d3
 .line()
 // eslint-disable-next-line no-restricted-globals
 .defined((d) => !isNaN(d.value))
 .x((d) => x(parseDate(d.date)))
 .y((d) => y(d.value));

const svg = d3
 .select("body")
 .append("svg")
 .attr("viewBox", [0, 0, width, height]);

svg.append("g").call(xAxis);

svg.append("g").call(yAxis);

svg
 .append("path")
 .datum(data)
 .attr("fill", "none")
 .attr("stroke", "#007bff")
 .attr("stroke-width", 3)
 .attr("stroke-linejoin", "round")
 .attr("stroke-linecap", "round")
 .attr("d", line.curve(d3.curveBasis));

CSS 代码如下:

body {
  width:600px;
  height:400px;
}

Answer 1

下面这两行控制 x2 和 y2 的长度需要调整:

.attr("y2", - height + 50)

.attr("x2", width - 110)

完整代码:

const data = [
 { date: "01/01/2016", value: 10000 },
 { date: "01/02/2016", value: 20000 },
 { date: "01/03/2016", value: 40000 },
 { date: "01/04/2016", value: 30000 },
 { date: "01/05/2016", value: 30000 }
];
const width = 600;
const height = 400;
const margin = { top: 10, right: 40, bottom: 40, left: 70 };
const parseDate = d3.timeParse("%m/%d/%Y");
const xFormat = "%d-%b";
const yMax = d3.max(data, (d) => d.value);

const x = d3
 .scaleTime()
 .domain(d3.extent(data, (d) => parseDate(d.date)))
 .rangeRound([margin.left, width - margin.right])
 .nice(data.length);
const y = d3
 .scaleLinear()
 .domain([0, yMax < 10 ? 10 : yMax])
 .range([height - margin.bottom, margin.top])
 .nice();
const xAxis = (g) =>
 g
   .style("font-size", "15px")
   .style("color", "#424242")
   .attr("transform", `translate(0,${height - margin.bottom})`)
   .call(d3.axisBottom(x).tickFormat(d3.timeFormat(xFormat)).ticks(d3.timeDay))
   .call((g) => g.select(".domain"))
   .call((g) =>
     g
       .selectAll(".tick line")
       .clone()
       .attr("y2", - height+50)
       .attr("stroke-opacity", 0.2)
   );
const yAxis = (g) =>
 g
   .style("font-size", "15px")
   .style("color", "#424242")
   .attr("transform", `translate(${margin.left},0)`)
   .call(d3.axisLeft(y))
   .call((g) => g.select(".domain"))
   .call((g) =>
     g
       .selectAll(".tick line")
       .clone()
       .attr("x2", width -110)
       .attr("stroke-opacity", 0.2)
   );
const line = d3
 .line()
 // eslint-disable-next-line no-restricted-globals
 .defined((d) => !isNaN(d.value))
 .x((d) => x(parseDate(d.date)))
 .y((d) => y(d.value));

const svg = d3
 .select("body")
 .append("svg")
 .attr("viewBox", [0, 0, width, height]);

svg.append("g").call(xAxis);

svg.append("g").call(yAxis);

svg
 .append("path")
 .datum(data)
 .attr("fill", "none")
 .attr("stroke", "#007bff")
 .attr("stroke-width", 3)
 .attr("stroke-linejoin", "round")
 .attr("stroke-linecap", "round")
 .attr("d", line.curve(d3.curveBasis));

CSS 代码:

body {
  width:600px;
  height:400px;
}