d3 v3折线图上的笔画宽度

Question

我正在使用 D3 v3 中的响应式折线图，但在制作轴的笔划宽度时遇到问题。现在它们非常厚，我不断在轴上添加stroke-width 样式，没有任何变化。

（请参阅 JSFiddle 的第 149 行） https://jsfiddle.net/t6vzegqp/7/

var xAxisEl = artboard.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("stroke-width", "3px");

如何更新每个轴的stroke-width？

Answer 1

这是一个有用的resource for d3 v3 axes - 您可以使用一些 CSS 解决您的问题：

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

你应该得到这个：

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

你的小提琴的 v6 端口没有这个轴的笔画宽度问题，它们开箱即用：

// DATA
var data = [{
    year: "2002",
    population: 191207000
  },
  {
    year: "2003",
    population: 192618000
  },
  {
    year: "2004",
    population: 175096000
  },
  {
    year: "2005",
    population: 172282000
  },
  {
    year: "2006",
    population: 177793000
  },
  {
    year: "2007",
    population: 181036000
  },
  {
    year: "2008",
    population: 176943000
  },
  {
    year: "2009",
    population: 184521000
  },
  {
    year: "2010",
    population: 173823000
  },
  {
    year: "2011",
    population: 171140000
  },
  {
    year: "2012",
    population: 172033000
  },
  {
    year: "2013",
    population: 180738000
  },
  {
    year: "2014",
    population: 179023000
  },
  {
    year: "2015",
    population: 177430000
  },
  {
    year: "2016",
    population: 190636623
  },
  {
    year: "2017",
    population: 199579997
  },
  {
    year: "2018",
    population: 201327425
  },
  {
    year: "2019",
    population: 207633646
  },
  {
    year: "2020",
    population: 218370375
  }
];

// Parse the date / time
var timeParse = d3.timeParse("%Y");
var formatValue = d3.format(".2s");

// force types
function type(dataArray) {
    dataArray.forEach(function(d) {
        d.year = timeParse(d.year);
        d.retention = +d.population;
    });
    return dataArray;
}
data = type(data);

// CHART CONFIG

// Set the dimensions of the canvas / graph
var margin = {top: 5, right: 0, bottom: 30, left: 65},
  width, // width gets defined below
  height = 250 - margin.top - margin.bottom;

// Set the scales ranges
var xScale = d3.scaleTime();
var yScale = d3.scaleLinear().range([height, 0]);

// Define the axes
var xAxis = d3.axisBottom().scale(xScale);
var yAxis = d3.axisLeft()
  .scale(yScale)
  .tickFormat(function(d) {
    return formatValue(d)
  });;

// create a line
var line = d3.line();

// Add the svg canvas
var svg = d3.select("#police-chart2")
  .append("svg")
  .attr("height", height + margin.top + margin.bottom);

var artboard = svg.append("g")
  .attr("transform", "translate(" + 65 + "," + 5 + ")");

// set the domain range from the data
xScale.domain(d3.extent(data, function(d) {
  return d.year;
}));
yScale.domain([
  d3.min(data, function(d) {
    return Math.floor(d.population - 5000000);
  }),
  d3.max(data, function(d) {
    return Math.floor(d.population + 5000000);
  })
]);

// draw the line created above
var path = artboard.append("path").data([data])
  .style('fill', 'none')
  .style('stroke', 'blue')
  .style('stroke-width', '3px');

// Add the X Axis
var xAxisEl = artboard.append("g")
.attr("transform", "translate(0," + height + ")")



// Add the Y Axis
var yAxisEl = artboard.append("g")
  .call(yAxis);

// styling the line bars
svg.append("text")
  .attr("class", "y-label")
  .attr("text-anchor", "end")
  .attr("y", 12)
  .attr("x", -20)
  .attr("yAxis", "1em")
  .attr("transform", "rotate(-90)")
  .text("Department of Safety Budget ($M)");

// DRAWING
function drawChart() {

  window_width = parseInt(d3.select('body').style('width'), 10)
  // TODO: Calibrate this:
  // console.log(window_width);
  if (window_width < 500)
    margin_right = 0.2 * window_width;
  else {
    margin_right = 0.5 * window_width;
  }

  // reset the width
  width = parseInt(d3.select('body').style('width'), 10) - margin.left - margin_right;

  // set the svg dimensions
  svg.attr("width", width + margin.left + margin_right);

  // Set new range for xScale
  xScale.range([0, width]);

  // give the x axis the resized scale
  xAxis.scale(xScale);

  // draw the new xAxis
  xAxisEl.call(xAxis);

  // specify new properties for the line
  line.x(function(d) {
      return xScale(d.year);
    })
    .y(function(d) {
      return yScale(d.population);
    });

  // draw the path based on the line created above
  path.attr('d', line);
}

// call this once to draw the chart initially
drawChart();


// RESIZING
// redraw chart on resize
window.addEventListener('resize', drawChart);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
<div class="svg" id="police-chart2"></div>