Простой графический график с датами в D3

Question

Я пытаюсь справиться с D3 и хочу нарисовать демо простой линейный график с 7 днями вдоль оси x. До сих пор я http://jsfiddle.net/wRDXt/1/

// Define the resolution 
var width = 500; 
var height = 250;  

// Create the SVG 'canvas' 
var svg = d3.select("body") 
    .append("svg") 
    .attr("viewBox", "0 0 " + width + " " + height) 

// get the data 
var dataset = [ 
    { date: new Date(2013, 17, 1), value: 1 }, 
    { date: new Date(2013, 17, 2), value: 2 }, 
    { date: new Date(2013, 17, 3), value: 3 }, 
    { date: new Date(2013, 17, 4), value: 4 }, 
    { date: new Date(2013, 17, 5), value: 5 }, 
    { date: new Date(2013, 17, 6), value: 6 }, 
    { date: new Date(2013, 17, 7), value: 7 } 
]; 

// Define the padding around the graph 
var padding = 50; 

// Set the scales 

var minDate = d3.min(dataset, function(d) { return d.date; }); 
minDate.setDate(minDate.getDate() - 1); 
var maxDate = d3.max(dataset, function(d) { return d.date; }); 

var xScale = d3.scale.linear() 
    .domain([minDate, maxDate]) 
    .range([padding, width - padding]); 

var yScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(d) { return d.value; })]) 
    .range([height - padding, padding]); 

// x-axis 
var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient("bottom") 
    .tickFormat("todo") 
    .tickSize(5, 5, 0) 

svg.append("g") 
    .attr("class", "axis x-axis") 
    .attr("transform", "translate(0," + (height - padding) + ")") 
    .call(xAxis); 

// y-axis 
var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left") 
    .tickFormat(function (d) { return d; }) 
    .tickSize(5, 5, 0) 
    .ticks(5); // set rough # of ticks 

svg.append("g") 
    .attr("class", "axis y-axis") 
    .attr("transform", "translate(" + padding + ",0)") 
    .call(yAxis); 

// Scatter plot 
svg.selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("circle") 
    .attr("class", "data-point") 
    .attr("cx", function(d) { 
     return xScale(d.date); 
    }) 
    .attr("cy", function(d) { 
     return yScale(d.value); 
    }) 
    .attr("r", 5); 

// line graph 
var line = d3.svg.line() 
    .x(function(d) { 
     return xScale(d.date); 
    }) 
    .y(function(d) { 
     return yScale(d.value); 
    }); 

svg.append("svg:path").attr("d", line(dataset)); 

Я застрял с несколькими вещами:

• как я ось х, чтобы отобразить один тик в день (я хочу, чтобы каждый тик, чтобы соответствовать данным point и line up)
• бит строки граф заполняется по какой-то причине, как многоугольник?
• как я могу форматировать текст тика по оси, так что это похоже на «1 JUL», «2 JUL» и т. Д.
• Как получить первое значение даты, которое должно появиться на первом тике, а не на y- ось - я попытался взять выходной день minDate, однако это повлияло на график, как вы можете видеть

Answer 1

Я обновил ваш jsfiddle, чтобы сделать то, что вы хотите here. Вкратце я сделал следующее:

• Используйте шкалу времени вместо линейной шкалы. Затем вы можете указать d3.time.days, 1 как ticks.
• Путь заполняется по умолчанию без инсульта. См. Добавленный CSS.
• Используйте функцию .tickFormat с соответствующим форматом.
• Должно быть установлено с использованием шкалы времени и соответствующей спецификации галочки.