Question

道歉，如果这似乎是一个重复的D3问题。我花了两天时间试图找出如何做到这一点。

我正在尝试创建一个多线图表，其中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个不同的“供应商”创建线条，其中“半”日期桶作为X坐标，“值”作为Y坐标。理想情况下，我会在图表上有4行，每个供应商一行，每行都有不同的颜色。

非常感谢任何帮助/方向。

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);

追加与数据绑定的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轴和颜色标签等。

Answer 2

您可能希望使用SVG path来表示每一行。 D3有一个line generator可以帮助定义行。

在最简单的形式中，您的数据可能看起来像这样：

var line = d3.svg.line()
    .x(function(d) { return xScale(d.Half); })
    .y(function(d) { return yScale(d.Value); });

svg.selectAll("path")
    .data(data)
    .enter().append("path")
        .attr("d", function(d) { return line(d.values); });

您可能还需要设置fill和stroke样式以使线条看起来很好，并且可能使用以供应商作为域的序数色标来单独着色。

多行序数d3图表

2 个答案:

正确设置xScale的域

追加与数据绑定的DOM元素

后续步骤