D3.js在简单的多线图

Question

我一直在尝试使用d3.js绘制多线图。

显示轴，但不显示图形。 不调用var line ...中的console.log。 但我根本就不知道为什么。

   var margin = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 50
        },
        width = 600 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

var x = d3.scale.ordinal().rangeRoundBands([0, width],0.1);
var y = d3.scale.linear().rangeRound([height, 0]);

var linearScale = d3.scale.linear();

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var line = d3.svg.line()
        .x(function(d) { console.log('x'+x(d.x)); return x(d.x); })
        .y(function(d) { console.log('y'+y(d.y)); return y(d.y); });

//d3.json("Arbeitsgang.json", function(error, data) {
var data = [
    {
        "key": "Paket 1",
        "color": "#51A351",
        "values": [
            {
                "x": 0,
                "y": 40,
                "arbeitsgang": "A1"
            },
            {
                "x": 6,
                "y": 30,
                "arbeitsgang": "A2"
            },
            {
                "x": 17,
                "y": 20,
                "arbeitsgang": "A3"
            }
        ]
    },
    {
        "key": "Paket 2",
        "color": "#666351",
        "values": [
            {
                "x": 0,
                "y": 45,
                "arbeitsgang": "A1"
            },
            {
                "x": 6,
                "y": 30,
                "arbeitsgang": "A1"
            },
            {
                "x": 17,
                "y": 20,
                "arbeitsgang": "A1"
            }
        ]
    }
];

linearScale.domain(d3.keys(data[0]).filter(function(key) { return key; }));

var eigenschaften
data.forEach(function(d) {
    d.key = d.key;
    eigenschaften = d.values;
});

eigenschaften.forEach(function(d) {
    d.x = +d.x;
    d.y = +d.y;
    d.arbeitsgang = d.arbeitsgang;
});


x.domain([
    d3.min(data, function(c) { return d3.min(c.values, function(v) { return v.x; }); }),
    d3.max(data, function(c) { return d3.max(c.values, function(v) { return v.x; }); })
]);
y.domain([
    d3.min(data, function(c) { return d3.min(c.values, function(v) { return v.y; }); }),
    d3.max(data, function(c) { return d3.max(c.values, function(v) { return v.y; }); })
]);

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

svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

var graphen = svg.selectAll(".graphen")
        .data(eigenschaften)
        .enter().append("g")
        .attr("class", "graphen");

graphen.append("path")
        .attr("class", "line")
        .attr("d", function(d) {
            return line(d);
        });

为了更简单一点，我已经找到了JSFiddle。 http://jsfiddle.net/thomas190393/7yffttcm/

请帮助我!!