使用d3.js在数据中查找最小日期以绘制svg

我使用d3.js来可视化一些数据，我对JavaScript和SVG等都是全新的。
我得到了下面的代码，它可以工作

var margin = {top: 20, right: 30, bottom: 30, left: 140},
    width = pbi.width - margin.left - margin.right,
    height = pbi.height - margin.top - margin.bottom;

var x = d3.time.scale()
      .range([0, width]);
      
var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], 0.1, 0.2);

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

  var header = svg.append("g")
    .attr("id", "header");
  // Title
  header.append("text")
      .attr("class", "title")
      .attr("x", 10)
      .attr("y", 15)
      .text("The visual");

pbi.dsv(function(Data) {
var mindate = new Date('01-01-1905');
var maxdate = new Date();
x.domain([mindate, maxdate]).nice(d3.time.month);
y.domain(Data.map(function(d) { return d.milestone; }));

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.svg.axis().scale(x).orient("bottom"));

svg.append("g")
    .attr("class", "y axis")
    .call(d3.svg.axis().scale(y).orient("left"));

svg.append("g")
.selectAll(".circle")
.data(Data)
.enter().append("circle")
    .attr("cx", function(d) {return x(new Date(d.date))} )
    .attr("cy", function(d) {return y(d.milestone)+33; })
    .attr("r", 10);
      });

接下来我想做的是修改mindate行，以便它动态地查找数据集中的最低日期。到目前为止，它是硬编码的。
类似于var mindate = new Date（d3.min（d.date）），但这肯定不起作用
我的数据格式如下：

{reportingyear:'2016', owner:'***', thing:'a-thing', milestone:'start-date', date:'01/12/10'},
{reportingyear:'2017', owner:'***', thing:'a-thing', milestone:'start-date', date:'01/12/10'},
{reportingyear:'2020', owner:'***', thing:'a-thing', milestone:'start-date', date:'01/12/10'}

（出于安全原因，已取消识别！））
任何提示，以指出我在正确的方向是非常赞赏。
谢谢
在应用下面的帮助后，我知道我遇到了以下错误x1c 0d1x
这段代码是为了在PowerBI中使用而开发的，在d3.js插件中，所以数据实际上是从数据模型中拉出来的，列表数据只是在浏览器中复制svg进行编辑。

首先，如果数据表示为对象列表，日期字段表示为字符串，则应考虑将这些字符串转换为Date对象。从您的示例中不能立即清楚地看出日期格式是什么，但是，假设它是月/日/年，您可以执行该任务，

data = data.map(function (o) {
  o.date = new Date(o.date);
  return o;
})

然后，您可以计算min为

d3.min(data, o => o.date)

下面是完整的代码：

let data = [
    {
      reportingyear: "2016",
      owner: "***",
      thing: "a-thing",
      milestone: "start-date",
      date: "01/12/10"
    },
    {
      reportingyear: "2017",
      owner: "***",
      thing: "a-thing",
      milestone: "start-date",
      date: "01/12/10"
    },
    {
      reportingyear: "2020",
      owner: "***",
      thing: "a-thing",
      milestone: "start-date",
      date: "01/12/10"
    }
  ].map(function (o) {
    o.date = new Date(o.date);
    return o;
  });
  
 
  let min_date = d3.min(data, o => o.date)
  console.log(min_date)

<script src="https://d3js.org/d3.v3.min.js"></script>

使用d3.js在数据中查找最小日期以绘制svg

1条答案

相关问题

热门标签

最新问答