3

私は D3 を理解しようとしていて、x 軸に沿って 7 日間の単純な折れ線グラフのデモを描きたいと思っています。これまでのところ、 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));

私はいくつかのことにこだわっています：

  • x 軸に 1 日に 1 つの目盛りを表示するにはどうすればよいですか (各目盛りをデータ ポイントと一致させて整列させたい)
  • 折れ線グラフのビットが何らかの理由で多角形のように塗りつぶされていますか?
  • 「1 JUL」、「2 JUL」などのように、軸の目盛りテキストを適切にフォーマットするにはどうすればよいですか
  • 最初の日付値を y 軸ではなく最初の目盛りに表示するにはどうすればよいですか - minDate を 1 日ずらしてみましたが、ご覧のとおりプロットに影響を与えました
4

1 に答える 1

5

ここで必要なことを行うように jsfiddle を更新しました。簡単に言えば、次のことを行いました。

  • 線形スケールの代わりに時間スケールを使用します。d3.time.days, 1として指定できますticks。
  • デフォルトでは、パスはストロークなしで塗りつぶされます。追加した CSS を参照してください。
  • .tickFormat関数は適切な形式で使用してください。
  • タイム スケールと適切なティック仕様を使用して修正する必要があります。
于 2013-07-17T22:15:38.357 に答える