D3.js x軸時間尺度

Question

我想在D軸上做一個散點圖，日期在x軸上。以下代碼基於d3站點上的散點圖示例。我必須做一些錯誤的ATTR（「CX」 區......

var data =[ 

    { 
    "title":"SUNY GENESEO COLLEGE STADIUM PHASE 2", 
    "stage":"Biddate Set", 
    "naples_update_date":"2/9/2014", 
    "value":7500000, 
    "value_type":"Confirmed", 
    "ownership":"State", 
    "work_type":"Alteration", 
    "record_date":"1/21/2014", 
    "floors":null, 
    "floor_area":null, 
    "floor_units":"", 
    "land_area":null, 
    "land_units":"", 
    "structures":null, 
    "units":0, 
    "contract_type":"Open Bidding", 
    "address":"1 College Cir", 
    "city":"Geneseo", 
    "state":"NY", 
    "county":"Livingston", 
    "date":1390911781 
    }, 
    { 
    "title":"KENTUCKY FAIR & EXPOSITION CENTER FREEDOM HALL-ROOFING", 
    "stage":"Post Bid Results Pending", 
    "naples_update_date":"2/10/2014", 
    "value":2662903, 
    "value_type":"Confirmed", 
    "ownership":"State", 
    "work_type":"Alteration", 
    "record_date":"10/29/2013", 
    "floors":2, 
    "floor_area":null, 
    "floor_units":"", 
    "land_area":null, 
    "land_units":"", 
    "structures":1, 
    "units":0, 
    "contract_type":"Open Bidding", 
    "address":"937 Phillips Ln", 
    "city":"Louisville", 
    "state":"KY", 
    "county":"Jefferson", 
    "date":1383132359 
    } 
]; 

var format = d3.time.format("%d/%m/%Y"); 
var dateMin = format.parse("20/03/2001"); 
var dateMax = format.parse("7/02/2001"); 

var margin = {top: 20, right: 20, bottom: 30, left: 120}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 
var xValue = function(d) { 
    return format.parse(d.record_date); 
    }, // data -> value 
    xScale = d3.time.scale().domain([dateMin,dateMax]).range([0, width]), // value -> display 
    xMap = function(d) { return xScale(xValue(d));}, // data -> display 
    xAxis = d3.svg.axis().scale(xScale).orient("bottom"); 
var yValue = function(d) { return d.value;}, // data -> value 
    yScale = d3.scale.linear().range([height, 0]), // value -> display 
    yMap = function(d) { return yScale(yValue(d));}, // data -> display 
    yAxis = d3.svg.axis().scale(yScale).orient("left"); 
// setup fill color 
var cValue = function(d) { return d.ownership;}, 
    color = d3.scale.category10(); 
// add the graph canvas to the body of the webpage 
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 + ")"); 

// add the tooltip area to the webpage 
var tooltip = d3.select("body").append("div") 
    .attr("class", "tooltip") 
    .style("opacity", 0); 

// don't want dots overlapping axis, so add in buffer to data domain 
    xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]); 
    yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]); 

//x-axis 
svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
    .append("text") 
     .attr("class", "label") 
     .attr("x", width) 
     .attr("y", -6) 
     .style("text-anchor", "end") 
     .text("Date"); 

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

// draw dots 
    svg.selectAll(".dot") 
     .data(data) 
    .enter().append("circle") 
     .attr("class", "dot") 
     .attr("r", 3.5) 
    .attr("cx", xMap) 
     .attr("cy", yMap) 
     .style("fill", function(d) { return color(cValue(d));}) 
     .on("mouseover", function(d) { 
      tooltip.transition() 
       .duration(200) 
       .style("opacity", 0.9); 
      tooltip.html(d.title + "<br/> (" + xValue(d) + ", " + yValue(d) + ")") 
       .style("left", (d3.event.pageX + 5) + "px") 
       .style("top", (d3.event.pageY - 28) + "px"); 
     }) 
     .on("mouseout", function(d) { 
      tooltip.transition() 
       .duration(500) 
       .style("opacity", 0); 
     }) 
    .attr('data-title',function(e){ 
return e.title; 
}) 
.attr('data-value',function(e){ 
return e.value; 
}) 
.attr('data-date',function(e){ 
return e.record_date; 
}) 
.attr('data-sqft',function(e){ 
return e.floor_area; 
}); 

我已搜索周圍，試圖按照提示在那裏，確保所選日期.range（）是裏面ATTR（CX）的日期格式相同的對象

Answer 1

演示：http://jsfiddle.net/EC6TL/

的問題是在行：

xScale.domain([d3.min(data, xValue) - 1, d3.max(data, xValue) + 1]); 

您不能添加和蘇從日期起btract 1。 :-)

修復：

xScale.domain([d3.min(data, xValue), d3.max(data, xValue)]);