我正在尝试用D3可视化我的json对象.我希望日期是x轴,y是销售额.数值存储为字符串

I am trying to visualize my json object with D3. I want date to be the x axis and y to be sales. number values stored a string

本文关键字:销售额 字符串 存储 日期 我希望 D3 对象 json 我的 可视化      更新时间:2023-09-26

我有一个json对象,我正试图用D3.js将其可视化。我希望x轴表示json对象中的日期,该对象存储为字符串,y轴表示销售预测,该预测也是字符串中的一个数字,即"85000.00"

我的json对象示例:

[{"Num":78689,"Client":"Health  Services" ,"TotalEstSales":"85,000,000.00","Date ":"2/15/2015","RFP Receipt Date":null,"Exp. Proposal Due Date":"3/6/2015","Proposal Submission Date":null,"estAwardDate":"4/15/2015","Procurement Type":"New - Incumbent","Bid Type":"Standalone Contract"}]

和我的d3代码:

   // Various accessors that specify the four dimensions of data to visualize.
function x(d) { return d.date; }
function y(d) { return d.TotalEstSales; }
function radius(d) { return parseFloat(d.TotalEstSales);}
function color(d) { return d.region; }
function key(d) { return d.Title;}
// Chart dimensions.
var margin = {top: 19.5, right: 19.5, bottom: 19.5, left: 39.5},
    width = 960 - margin.right,
    height = 500 - margin.top - margin.bottom;
// Various scales. These domains make assumptions of data, naturally.
var xScale = d3.scale.log().domain([300, 1e5]).range([0, width]),
    yScale = d3.scale.linear().domain([10000, 85000000]).range([height, 0]),
    radiusScale = d3.scale.sqrt().domain([0, 5e8]).range([0, 40]),
    colorScale = d3.scale.category10();
// The x & y axes.
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(",d")),
    yAxis = d3.svg.axis().scale(yScale).orient("left");
// Create the SVG container and set the origin.
var svg = d3.select("#chart").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 + ")");
// Add the x-axis.
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
// Add the y-axis.
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);
// Add an x-axis label.
svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("Data of RFP");
// Add a y-axis label.
svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("Award amount");
// Add the year label; the value is set on transition.
var label = svg.append("text")
    .attr("class", "year label")
    .attr("text-anchor", "end")
    .attr("y", height - 24)
    .attr("x", width)
    .text(2015);
// Load the data.
d3.json("rfpdata.json", function(data) {
  // A bisector since many nation's data is sparsely-defined.
  // var bisect = d3.bisector(function(d) { return d[0]; });
  // Add a dot per nation. Initialize the data at 1800, and set the colors.
  var dot = svg.append("g")
      .attr("class", "dots")
    .selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .style("fill", function(d) { return colorScale(color(d)); })
      .call(position)
      .sort(order);
  // Add a title.
  dot.append("title")
      .text(function(d) { return d.Client; })


  // Positions the dots based on data.
  function position(dot) {
    dot .attr("cx", function(d) { return xScale(x(d)); })
        // .attr("cy", function(d) { return yScale(y(d)); })
        .attr("r", function(d) { return radiusScale(radius(d)); });
  }
  // Defines a sort order so that the smallest dots are drawn on top.
  function order(a, b) {
    return radius(b) - radius(a);
  }
  // After the transition finishes, you can mouseover to change the year.
  function enableInteraction() {
    var yearScale = d3.scale.linear()
        .domain([1800, 2009])
        .range([box.x + 10, box.x + box.width - 10])
        .clamp(true);
    // Cancel the current transition, if any.

    function mouseover() {
      label.classed("active", true);
    }
    function mouseout() {
      label.classed("active", false);
    }
    function mousemove() {
      displayYear(yearScale.invert(d3.mouse(this)[0]));
    }
  }

    // this is the function needed to bring in data
  // Interpolates the dataset for the given (fractional) year.
  function interpolateData(date) {
    return data.map(function(d) {
      return {
        title: d.Title,
        client: d.Client,
        sales: parseFloat(d.TotalEstSales),
        sales: interpolateValues(d.TotalEstSales, date),
      };
    });
  }
  // Finds (and possibly interpolates) the value for the specified year.
  function interpolateValues(values, date) {
    var i = bisect.left(values, date, 0, values.length - 1),
        a = values[i];
    if (i > 0) {
      var b = values[i - 1],
          t = (date - a[0]) / (b[0] - a[0]);
      return a[1] * (1 - t) + b[1] * t;
    }
    return a[1];
  }
});

我不确定我做错了什么,但数据没有显示?我是否正确解析了日期字符串?这是d3网站上的一张图表。我想要一个气泡图,其中半径根据销售规模而变化,日期在x轴上。

@all更新:我能够在这里对xaxis上的日期进行适当的调整:

var xAxis = d3.svg.axis().orient("bottom").scale(xScale).tickFormat(d3.time.format("%m/%d")),
    yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(23, d3.format(" ,d"));

d3.time.format正是我想要的。数据加载后,我需要解析日期:

month = data.Date;
      parseDate = d3.time.format("%m/%d/%Y").parse;
      data.forEach(function(d) {
        d.Date = parseDate(d.Date);
      });
      // update Dates here when new  report comes in monthly
      xScale.domain([parseDate("1/1/2015"),parseDate("6/1/2015")]);

显然,在excel文件中使用"Date"作为名称列并不是js中的"Date"的想法(因为它是一个项目)。