0

これは私が d3.js で作成しているグラフです。これは、機能したバージョンのスクリーンショットです

時間ディメンションのいくつかを変更しました。ここを参照

http://jsfiddle.net/GyWpN/14/

一連の日のオープン チケットとクローズ チケットを比較しています。

現在、データの形式が正しくないように感じます。

 [
{
    "open": "1",
    "date": "2012-12-02 00:00:00+00",
    "completed": 0
},
{
    "open": "3",
    "date": "2012-12-11 00:00:00+00",
    "completed": 0
},
{
    "open": "1",
    "date": "2012-12-12 00:00:00+00",
    "completed": 0
},
{
    "open": "1",
    "date": "2012-12-17 00:00:00+00",
    "completed": 0
},



.
.
.
]

比較のために 2 組の行を作成する必要があるため、別の形式にする必要があるかもしれません。

代わりにデータを 2 つの json 配列にする必要がありますか?

このグラフを完成させるにはどうすればよいですか? 現在、xディメンションを からd3.scale.linear()に変更した後d3.time.scale()、データを表示できません。また、オブジェクトを現在の json 形式に変更しました。

洞察力に感謝

4

1 に答える 1

1

このデータ形式を使用して、必要なことを行うことができます。これはあまり DRY な方法ではありませんが、次のステップに役立つ可能性があります。

var data = [
    {
        "open": "3",
        "date": "2012-12-02 00:00:00+00",
        "completed": 0
    },
    {
        "open": "4",
        "date": "2012-12-11 00:00:00+00",
        "completed": 1
    },
    {
        "open": "2",
        "date": "2012-12-12 00:00:00+00",
        "completed": 4
    },
    {
        "open": "5",
        "date": "2012-12-17 00:00:00+00",
        "completed": 9
    }];

var width = 276,
    height = 200,
    padding = 50;

// input format of date
var parse_date = d3.time.format("%Y-%m-%d 00:00:00+00").parse;

// clean data
data.forEach(function(d) {
    d.date = parse_date(d.date);
    d.open = parseInt(d.open);
    //d.completed = parseInt(d.completed);
});

// time scale for x axis
var x = d3.time.scale()
    .domain(d3.extent(data, function(d) { return d.date; }))
    .range([0, width-padding]);

// assume you start from 0 and that completed has max value
// probably needs improving
var y = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.completed; })])  
    .range([height-padding, 0]);

// verbose but simple way of defining lines and areas

var open_line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.open); });

var complete_line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.completed); });

var open_area = d3.svg.area()
    .x(open_line.x())
    .y1(open_line.y())
    .y0(y(0));

var complete_area = d3.svg.area()
    .x(complete_line.x())
    .y1(complete_line.y())
    .y0(y(0));

// draw the svg
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


// define xaxis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%d-%b"));

// attach data to a g object
var lines = svg.append( "g" )
    .data( [data] );  // a list with a single item as the whole path is generated from a single list

// draw lines and areas

lines.append( "path" )
    .attr("class", "line")
    .attr("d", open_line);

lines.append( "path" )
    .attr("class", "area")
    .attr("d", open_area);

lines.append( "path" )
    .attr("class", "line")
    .attr("d", complete_line);

lines.append( "path" )
    .attr("class", "area")
    .attr("d", complete_area);

// now use data without the additional nest as want to create an dot for each
// item in the list
dots = lines.selectAll(".dot")
    .data( data );

    // draw two lots of dots, one for opened and one for completed
    dots.enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", open_line.x())
    .attr("cy", open_line.y())
    .attr("r",3.5);

    dots.enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", complete_line.x())
    .attr("cy", complete_line.y())
    .attr("r",3.5);

// and put the xaxis in
svg.append("g")
    .attr("class", "axis")   // give it a class so it can be used to select only xaxis labels  below
    .attr("transform", "translate(0," + (height - padding) + ")")
    .call(xAxis)​

http://jsfiddle.net/phoebebright/JZJr8/4/

于 2013-01-03T22:41:05.117 に答える