Question

我正在尝试使用D3版本4.x.x设置一个简单的条形图。但是，我相信我正在做所有事情，但似乎无法显示。我附上了一个codepen来看这个。

提前感谢您因为我是D3新手而引起的任何noob问题。 http://codepen.io/PizzaPokerGuy/pen/XpoJxG?editors=0111

enter code here//Width of svg, will be used again down the road
const width = 1000;
//Height of svg, will be used again down the road
const height = 800;
//Padding so things have room to be displayed within svg
const padding = 60;
//Create our SVG container
var svg = d3.select("body")
.append('svg')
.attr("width", width)
.attr("height", height);

//JSON Enter data
var data =      d3.json('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/mast er/GDP-data.json',
  (error, data) => {
   var chartData = data.data;
   //Stores barWidth variable, math.ciel rounds up, used to set an equal width for each rect
  var barWidth = Math.ceil((width - padding) / chartData.length);
   //Define xScale
  const xScale = d3.scaleLinear()
  .domain([0, d3.max(chartData, (d) => d[0])])
  .range([padding, width - padding]);
  //Define yScale
const yScale = d3.scaleLinear()
  .domain([0, d3.max(chartData, (d) => d[1])])
  .range([height - padding, padding]);

//Selects SVG elements and selects all rect elements within it
svg.selectAll("rect")
  //Adds data to use later
  .data(chartData)
  //Allows us to add items to the dom if data is larger than ammoutn of rect elements selected
  .enter()
  //Adds rect element
  .append("rect")
  //Adds x attribute to x based off of d(chartData), need to create a date as a string is not enough
  .attr("x", (d) => xScale(new Date(d[0])))
  //Sets y attribute of rectangle
  .attr("y", (d) => yScale(d[1]))
  //Sets height, we minus the value from height to invert the bars
  .attr("height", (d) => height - yScale(d[1]))
  //sets width of rect elements
  .attr("width", barWidth)
  //fill in color of rects
  .attr("fill", "black");

}）;

Answer 1

您正在使用X轴的日期，因此您最好使用时间刻度而不是scaleLinear

const xScale = d3.scaleTime()
    .domain(d3.extent(chartData, function(d) { return new Date(d[0]); }))
    .range([padding, width - padding]);

Codepen：http://codepen.io/anon/pen/egbGaJ?editors=0111

Answer 2

x值是表示日期的字符串，但您并未试图将其视为日期。您当前的scale代码期望它们是数字。因此，您需要决定将它们创建为字符串或日期。例如，将它们强制转换为日期将如下所示;

// a time parser
var tF = d3.timeParse("%Y-%m-%d");
// convert to dates
chartData.forEach(function(d){
  d[0] = tF(d[0])
});

...

//Define xScale as a time scale
const xScale = d3.scaleTime()
  .domain([0, d3.max(chartData, (d) => d[0])])
...

更新了codepen。

D3矩形元素不显示

2 个答案: