javascript - 多线序数 d3 图表

Question

如果这看起来像是一个重复的 D3 问题，我们深表歉意。我花了 2 天时间想弄清楚如何做到这一点。

我正在尝试创建一个多折线图，其中 x 轴作为顺序刻度，y 轴作为正常线性刻度。我所看到的一切都涉及结合使用时间和线性比例，我似乎无法转换示例以使它们按我想要的方式工作。

这是我的示例 JSON 数据:

var data = 
[
    { "Supplier": "Supplier1", "Half": "2013 2H", "Value": 99.86047786 },
    { "Supplier": "Supplier1", "Half": "2013 1H", "Value": 93.86047786 },
    { "Supplier": "Supplier1", "Half": "2012 2H", "Value": 98.86047786 },
    { "Supplier": "Supplier1", "Half": "2012 1H", "Value": 96.86047786 },
    { "Supplier": "Supplier2", "Half": "2013 2H", "Value": 97.86047786 },
    { "Supplier": "Supplier2", "Half": "2013 1H",  "Value": 91.86047786 },
    { "Supplier": "Supplier2", "Half": "2012 2H","Value": 93.86047786 },
    { "Supplier": "Supplier2", "Half": "2012 1H", "Value": 94.86047786 },
    { "Supplier": "Supplier3", "Half": "2013 2H", "Value": 92.86047786 },
    { "Supplier": "Supplier3", "Half": "2013 1H", "Value": 91.86047786 },
    { "Supplier": "Supplier3", "Half": "2012 2H", "Value": 88.86047786 },
    { "Supplier": "Supplier3", "Half": "2012 1H", "Value": 87.86047786 },   
    { "Supplier": "Supplier4", "Half": "2013 2H", "Value": 88.86047786 },
    { "Supplier": "Supplier4", "Half": "2013 1H", "Value": 86.86047786 },
    { "Supplier": "Supplier4", "Half": "2012 2H", "Value": 83.86047786 },
    { "Supplier": "Supplier4", "Half": "2012 1H", "Value": 81.86047786 },   
];

这是我到目前为止尝试创建图表的地方:

//Width and height
var margin = {top: 20, right: 20, bottom: 30, left: 40};           
var width = 600 - margin.left - margin.right;
var height= 500-margin.top -margin.bottom;
var w = width;
var h = height;

var xScale = d3.scale.ordinal()
    .domain(data.map(function (d) {return d.Half; }))
    .rangeRoundBands([margin.left, width], 0.05);

var xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(height - margin.bottom);

var yScale = d3.scale.linear()
    .domain([0, d3.max(data, function(d) {return d.Value; })])
    .range([h,0]);


//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);


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

data = d3.nest().key(function(d) { return d.Supplier; }).entries(data); 

我想不通的是如何为 4 个不同的“vendor ”创建行，其中“半”日期桶作为 X 坐标，“值”作为 Y 坐标。理想情况下，我会在图表上有 4 条线，每个 vendor 一条线，每条线都有不同的颜色。

任何帮助/指导将不胜感激。

Answer 1

这应该让你开始:http://jsfiddle.net/hU6r6/

正确设置xScale的域

// Find all the unique x-axis values
// Fortunately, alphabetical sorting of the values also yields
// the correct order
var xValues = d3.set(data.map(function (d) { return d.Half; })).values().sort();

// Set up the domain using only the unique values for the xAxis
var xScale = d3.scale.ordinal()
    .domain(xValues)
    // Setting the rangePoints instead of rangeBands
    .rangePoints([0, width], 0.5);

追加绑定(bind)到数据的 DOM 元素

// This is the same data as you have created
var supplierData = d3.nest().key(function(d) { return d.Supplier; }).entries(data); 

// Create a line object which will set the 'd' attributes for the paths
var line = d3.svg.line()
                  .interpolate("linear")
                  .x(function (d) { return xScale(d.Half); })
                  .y(function (d) { return yScale(d.Value); });

// To choose different colors
var colors = d3.scale.category10();

// The chart container
var gLines = svg.selectAll('g.chart-area').data([ supplierData ]);

gLines.enter()
  .append('g')
  .classed('chart-area', true)
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ")");

// Our 'paths' which are the lines
var lines = gLines.selectAll('path.supplier').data(function (d) { return d; });

// Our 'paths' which are the lines
lines.enter()
  .append('path')
  .classed('supplier', true)
  // The data is of the form { key: 'SupplierX', values: [ ... ] }
  .attr('d', function (d) { return line(d.values); })
  .attr('fill', 'none')
  .attr('stroke', function (d, i) { return colors(i); })

后续步骤

如果您关注了 tutorial , 然后你会看到 jsFiddle 只实现了数据的 enter 阶段。也许这足以满足您的目的，不需要 update 和 exit 阶段。不过，您应该完全按照本教程进行操作。

除此之外，此图仍然是基本图，缺少适当的 y 轴和颜色标签等。