Javascript d3 v3折线图上的笔划宽度

我正在使用D3V3中的响应折线图，我在轴的笔划宽度方面遇到了问题。现在它们是超厚的，我一直在轴上添加笔划宽度样式，没有任何变化

请参阅JSFIDLE的第149行

如何更新每个轴的笔划宽度？

这里有一个有用的方法-您可以使用一些CSS解决您的问题：

path.domain {
  fill: none;
  stroke: slategray;
  shape-rendering: crispEdges;
}

你应该得到这个：

我倾向于同意评论员的观点，即是时候从这个版本的D3开始了——当然，如果你的情况允许的话

fiddle的v6端口在轴上没有笔划宽度问题，它们是开箱即用的：

//资料 风险值数据=[{ 年份：2002年， 人口：191207000 }, { 年份：2003年， 人口：192618000 }, { 年份：2004年， 人口：175096000 }, { 年份：2005年， 人口：172282000 }, { 年份：2006年， 人口：177793000 }, { 年份：2007年， 人口：181036000 }, { 年份：2008年， 人口：176943000 }, { 年份：2009年， 人口：184521000 }, { 年份：2010年， 人口：173823000 }, { 年份：2011年， 人口：171140000 }, { 年份：2012年， 人口：172033000 }, { 年份：2013年， 人口：180738000 }, { 年份：2014年， 人口：179023000 }, { 年份：2015年， 人口：177430000 }, { 年份：2016年， 人口：190636623 }, { 年份：2017年， 人口：199579997 }, { 年份：2018年， 人口：201327425 }, { 年份：2019年， 人口：20763646 }, { 年份：2020年， 人口：218370375 } ]; //解析日期/时间 var timeParse=d3。timeParse%Y； var formatValue=d3.format.2s； //部队类型 函数类型数据数组{ dataArray.forEachfunctiond{ d、 年=时间解析。年； d、 保留率=+d.总体； }; 返回数据数组； } 数据=类型数据； //图表配置 //设置画布/图形的尺寸 var margin={top:5，right:0，bottom:30，left:65}， 宽度，//下面定义了宽度 高度=250-margin.top-margin.bottom； //设置刻度范围 var xScale=d3.scaleTime； var yScale=d3.刻度线性范围[高度，0]； //定义轴 var xAxis=d3.axisBottom.scalexScale； var yAxis=d3.0左 .鳞片鳞片 .滴答声{ 返回值 };; //创建一条线 var-line=d3.line； //添加svg画布 var svg=d3.selectpolice-chart2 .appendsvg .attrhight，height+margin.top+margin.bottom； var artboard=svg.appendg .attransform，translate+65+，+5+； //根据数据设置域范围 xScale.domaind3.extentdata，函数d{ 返回d.year； }; yScale.domain[ d3.mindata，功能D{ 返回Math.floord.population-5000000； }, d3.maxdata，函数D{ 返回Math.floord.population+5000000； } ]; //在上面画一条线 var path=artboard.appendpath.data[data] .样式“填充”、“无” .style'stroke'、'blue' .样式“笔划宽度”、“3px”； //添加X轴 var xAxisEl=artboard.appendg .attrtransform，translate0，+高度+ //添加Y轴 var yAxisEl=artboard.appendg .callyAxis； //设置线条条的样式 svg.appendtext .attrclass，y标签 .attr文本锚定，结束 attry先生，12岁 .attrx，-20 .attryAxis，1em .attransform，旋转-90 .text安全部预算为万美元； //绘图 功能图{ window_width=parseIntd3。选择“主体”。样式为“宽度”，10 //TODO:校准此项： //console.logwindow_宽度； 如果窗宽<500 右边距=0.2*窗宽； 否则{ 右边距=0.5*窗宽； } //重置宽度 width=parseIntd3.选择“body”。样式为“width”，10-margin.left-margin\u right； //设置svg维度 svg.attrwidth，width+margin.left+margin\u right； //为xScale设置新范围 xScale.范围[0，宽度]； //为x轴指定调整大小的比例 xAxis.scalexScale； //绘制新的X轴 xAxisEl.callxAxis； //指定线的新特性 line.x函数{ 返回xScaled.year； } .功能正常{ 回归尺度人口； }; //根据上面创建的线绘制路径 路径属性行； } //调用此函数一次，以最初绘制图表 图纸； //调整大小 //在调整大小时重新绘制图表 window.addEventListener'resize'，drawChart；

---

哇，你使用的是D3V3，我建议你使用最新版本，这一个已经过时了。样式不起作用，因为它实际上是一条6px宽的路径。尝试设置填充属性和笔划的样式，以检查@CarlosMoura指出的差异，您使用的是非常过时的D3 5 y.o版本，至少您需要使用V6重新编写代码。JS FIDLE没有V6的选项，但您可以将其指定为en外部资源：。我很肯定它也会解决axis的问题。

path.domain {
  fill: none;
  stroke: slategray;
  shape-rendering: crispEdges;
}