D3.js x 축의 날짜가있는 선형 차트

Question

d3.js로이 꺾은 선형 차트에서 작업하고 있습니다. 날짜 서식을 지정하는 데 문제가 있으며 parseDate 필드를 변경하는만큼 "예"인 "15 June"을 얻을 수있는 방법이 없습니다. % x의 x 축에서 .tickformat을 변경하면 정확한 날짜가 아닌 "01 Oct"이됩니다.

다음은 JS 바이올린 http://jsfiddle.net/w0d4t1n5/

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

당신의 도움을 주셔서 감사합니다!

Answer 1

내가 이해한다면 모든 datapoint의 날짜가 시간 단위가 아닌 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); 
});