D3.js x軸の日付を含む折れ線

Question

私はd3.jsでこの折れ線グラフに取り組んでいます。 日付の書式設定に問題があり、parseDateフィールドを変更するだけで、たとえば「15 June」を取得する方法がありません。 ％dのx軸の.tickformatを変更した場合、正確な日付ではなく "01 Oct"となります。ここで

は、JSのフィドルはあなたの助けのための http://jsfiddle.net/w0d4t1n5/

<script async src="//jsfiddle.net/w0d4t1n5/embed/"></script> 

感謝です！

Answer 1

わかっていれば、時分割ではなく、すべてのデータポイントの日付がx軸に表示されます。そのために

、あなたが順序尺度を作成し、X軸方向にそれを呼び出す必要があります：

フィドルはここにある：

http://jsfiddle.net/z94uzc0L/1/

var margin = { 
    top: 30, 
    right: 100, 
    bottom: 30, 
    left: 50 
    }, 
    width = 365 - margin.left - margin.right, 
    height = 280 - margin.top - margin.bottom, 
    padding = 1; 

var parseDate = d3.time.format("%d-%b-%y").parse; 

// Set the ranges 
var x = d3.time.scale() 
    .range([10, width - 15]); 

//ordinal scale 
var x2 = d3.scale.ordinal().rangePoints([0, width ], .25) 

var y = d3.scale.linear() 
    .range([height, 0]); 

var xAxis = d3.svg.axis().scale(x2) 
    .orient("bottom") 
    .tickFormat(d3.time.format("%b %d")) 
    .ticks(4) 
    .tickPadding(2); 

var yAxis = d3.svg.axis().scale(y) 
    .orient("left"); 

var valueline = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) { 
    return x(d.date); 
    }) 
    .y(function(d) { 
    return y(d.trump); 
    }); 

var valueline2 = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) { 
    return x(d.date); 
    }) 
    .y(function(d) { 
    return y(d.clinton); 
    }); 

//florida 

var chart1 = d3.select("#florida") 
    .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 + ")"); 

//needed for the grid 
function make_y_axis() { 
    return d3.svg.axis() 
    .scale(y) 
    .orient("left") 
} 

data1 = [{ 
    "date": "15-Jun-16", 
    "trump": 43.4, 
    "clinton": 44 
}, { 
    "date": "15-Jul-16", 
    "trump": 43.4, 
    "clinton": 44 
}, { 
    "date": "15-Aug-16", 
    "trump": 42, 
    "clinton": 45.6 
}, { 
    "date": "15-Sep-16", 
    "trump": 45.1, 
    "clinton": 44.4 
}, { 
    "date": "06-Oct-16", 
    "trump": 43.3, 
    "clinton": 46.2 
}, { 
    "date": "10-Oct-16", 
    "trump": 49.3, 
    "clinton": 49.2 
}]; 



var color = d3.scale.ordinal().range(["#004ecc", "#cc0000"]); 
//d3.csv("data.csv", function(error, data) { 
data1.forEach(function(d) { 
    d.date = parseDate(d.date); 
    d.trump = +d.trump; 
    d.clinton = +d.clinton; 
}); 

// Scale the range of the data 


x.domain(d3.extent(data1, function(d) { 
    return d.date; 
})); 
y.domain([36, 50]); 

//update ordinal scale domain 
x2.domain(data1.map(function(d) { return d.date; })); 

//add the grid 
chart1.append("g") 
    .attr("class", "grid") 
    .call(make_y_axis() 
    .tickSize(-width, 0, 0) 
    .tickFormat("") 
) 

chart1.append("path") 
    .attr("class", "line") 
    .attr("stroke", "red") 
    .attr("d", valueline(data1)); 

chart1.append("path") 
    .attr("class", "line2") 
    .attr("d", valueline2(data1)); 

// Add the X Axis 
chart1.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

// Add the Y Axis 
chart1.append("g") 
    .attr("class", "y axis") 
    .call(yAxis); 

chart1.append("text") 
    .attr("transform", "translate(" + (width + 3) + "," + y(data1[0].clinton) + ")") 
    .attr("x", ".1em") 
    .attr("y", "-40") 
    .attr("text-anchor", "start") 
    .style("fill", "red") 
    .style("font-size", "15") 
    .style("font-weight", "bold") 
    .text("Clinton 46.2%"); 

chart1.append("text") 
    .attr("transform", "translate(" + (width + 3) + "," + y(data1[0].trump) + ")") 
    .attr("x", ".1em") 
    .attr("y", "10") 
    .attr("text-anchor", "start") 
    .style("fill", "steelblue") 
    .style("font-size", "15") 
    .style("font-weight", "bold") 
    .text("Trump 43.3%"); 

//plus 1: animation 

var curtain = chart1.append('rect') 
    .attr('x', -1 * width) 
    .attr('y', -1 * height) 
    .attr('height', height) 
    .attr('width', width) 
    .attr('class', 'curtain') 
    .attr('transform', 'rotate(180)') 
    .style('fill', '#ffffff') 

/* Optionally add a guideline */ 
var guideline = chart1.append('line') 
    .attr('stroke', '#333') 
    .attr('stroke-width', 0.4) 
    .attr('class', 'guide') 
    .attr('x1', 1) 
    .attr('y1', 1) 
    .attr('x2', 1) 
    .attr('y2', height) 

var t = chart1.transition() 
    .delay(120) 
    .duration(500) 
    .ease('linear') 
    .each('end', function() { 
    d3.select('line.guide') 
     .transition() 
     .style('opacity', 0) 
     .remove() 
    }); 

t.select('rect.curtain') 
    .attr('width', 0); 
t.select('line.guide') 
    .attr('transform', 'translate(' + width + ', 0)') 

d3.select("#show_guideline").on("change", function(e) { 
    guideline.attr('stroke-width', this.checked ? 1 : 0); 
    curtain.attr("opacity", this.checked ? 0.75 : 1); 
});