Question

我有一个json对象，我试图用D3.js可视化。我希望x轴表示json对象中的日期，该日期存储为字符串，y轴表示销售预测，也是字符串中的数字，即＆＃34; 85,000.00＆＃34;

我的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轴上。

Answer 1

@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")]);

显然，使用＆＃34; Date＆＃34;作为excel文件中的名称列并不是＆＃34;日期＆＃34;在js中（因为它是一个对象）。

我试图用D3可视化我的json对象。我希望日期是x轴，y是销售。数值存储一个字符串

1 个答案: