Question

我正在使用d3导入.csv数据集，直到现在我仍无法使用散点图正确显示它。代码已从线状图更改，一切正常。

var margin = {top: 30, right: 400, bottom: 100, left: 100},
width = 1700 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;

var parseDate = d3.timeParse("%d.%m.%Y");
var bisectDate = d3.bisector(function(d) { return d.date; }).left;
var formatTime = d3.timeFormat("%d. %b")

var xScale = d3.scaleTime()
  .range([0, width]);

var yScale = d3.scaleLinear()
  .range([height, 0]);

// 40 Custom DDV colors 
var color = d3.scaleOrdinal(d3.schemeCategory10);

var xAxis = d3.axisBottom(xScale)
  .tickFormat(d3.timeFormat("%d. %b"));

var yAxis = d3.axisLeft(yScale);  

var maxY; 

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv('/extras/lineplot.csv')
  .then(function(data) { 
    color.domain(d3.keys(data[0]).filter(function(key) {
  return (key !== "date"); 
    }));


  data.forEach(function(d) { 
    d.date = parseDate(d.date);
  });  

var categories = color.domain().map(function(name) {
return {
  name: name, 
  values: data.map(function(d) { 
    return {
      date: d.date, 
      wert: +(d[name]),
      };
  }),
  visible: true
};
});

xScale.domain(d3.extent(data, function(d) { return d.date; })); 

maxY = findMaxY(categories); 
yScale.domain([0,maxY]);


svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("x", -10)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Wert");

var issue = svg.selectAll(".issue")
  .data(categories) 
  .enter().append("g")
  .attr("class", "issue");  

svg.append("g")
    .selectAll("circle")
   .data(categories)
   .enter()
   .append("circle")        
   .attr("id", d=> getID(d.values))
    .attr("r", 5)
    .attr("cx", d => xValue(d.values))
    .attr("cy", d => yValue(d.values))
    .style("fill", d => color(d.name))

  function yValue(d) { Object.keys(d).forEach(function (key){
    return yScale(d[key].wert);}
  )}; 

  function xValue(d) { Object.keys(d).forEach(function (key){
    return xScale(d[key].date);}
  )}; 

  function getID(d) { Object.keys(d).forEach(function (key){
    return d[key];}
  )};   
})

.catch(function(error){
  console.log(error);
}) ;

function findMaxY(data){ 
  var maxYValues = data.map(function(d) { 
    if (d.visible){
      return d3.max(d.values, function(value) {
        return value.wert+0.05*value.wert; 
      })
    }
  });
  return d3.max(maxYValues);
}

数据如下：

"date";"2015";"2016";"2017" 
"27.06.2019";"";"600";""
"30.06.2019";"";"";"1840"
"11.07.2019";"";"1320";""
"10.08.2019";"14680";"";""

所以三年不同，有些日期在不同的日期。

我尝试了不同版本的数据集解析，直到现在我只获得了上角三列的3分。

如何读取具有正确坐标的四个不同点？

通过.csv-import和d3无法显示散点图

0 个答案: