Javascript 多线有序d3图

如果这似乎是重复的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条线，每个供应商一条，每一条都有不同的颜色

---

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

这应该让您开始：

正确设置xScale的域

//查找所有唯一的x轴值
//幸运的是，按字母顺序排列的值也会产生
//正确的顺序
var xValues=d3.set（data.map（函数（d）{return d.Half；}））.values（）.sort（）；
//仅使用xAxis的唯一值设置域
var xScale=d3.scale.ordinal（）
.domain（xvalue）
//设置范围点而不是范围标注栏
.范围点（[0，宽度]，0.5）；

附加绑定到数据的DOM元素

//这与您创建的数据相同
var supplierData=d3.nest（）.key（函数（d）{return d.Supplier；}）；
//创建一个line对象，该对象将设置路径的“d”属性
var line=d3.svg.line（）
.插入（“线性”）
.x（函数（d）{返回xScale（d.Half）；}）
.y（函数（d）{返回yScale（d.Value）；}）；
//选择不同的颜色
var colors=d3.scale.category10（）；
//图表容器
var gLines=svg.selectAll（'g.chart-area'）.data（[supplierData]）；
gLines.enter（）
.append（'g'）
.classed（'chart-area'，true）
.attr（'transform'，'translate（'+margin.left+'，'+margin.top+））；
//我们的“路径”是线
var lines=gLines.selectAll（'path.supplier'）.data（函数（d）{return d；}）；
//我们的“路径”是线
行。输入（）
.append（'路径'）
.classed（“供应商”，真实）
//数据的格式为{key:'SupplierX'，值：[……]}
.attr（'d'，函数（d）{返回行（d.values）；}）
.attr（'填充'，'无'）
.attr（'stroke'，函数（d，i）{返回颜色（i）；}）

下一步 如果遵循，那么您将看到JSFIDLE只实现数据的

enter

阶段。也许这对于您的目的已经足够了，并且不需要

更新

和

退出

阶段。不过，您应该完全按照教程进行操作

---

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

您可能需要使用SVG

路径来表示每条线。D3有一个可以帮助定义线条的工具

以最简单的形式，您的数据可能会显示如下：

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

您可能还需要设置
填充
和
笔划
样式，以使线条看起来好看，并可能使用供应商作为域的顺序色标对其单独上色。
谢谢。这是我需要的缺失的一步！我在处理行创建函数时遇到了一些问题。请看以下内容：