Question

我有一个像这样的对象数组：

  $scope.customerCosts = [
                {
                    planPriceID: 39583,
                    planID: 11806,
                    monthlyTrueCost: 45.76,
                    usage: 244,
                    planRep: "Jane Doe"
                },
                {
                    planPriceID: 39584,
                    planID: 11806,
                    monthlyTrueCost: 27.82,
                    usage: 244,
                    planRep: "Joe Smith"
                }

我正在尝试根据planRep创建一个多系列行，该系列将有多个条目。所以，Joe的一行，Jane的一行。

问题是，我的图表中只有1行，所有数据都放在一个数组中。

  // define dimensions of graph
            var margins = [100, 100, 100, 100];
            var width = 1000 - margins[1] - margins[3];
            var height = 400 - margins[0] - margins[2];

            // Setup data
            var data = $scope.customerCosts;
            var maxTrueCost = Math.max.apply(Math, data.map(function (o) { return o.monthlyTrueCost; }));
            var maxUsage = Math.max.apply(Math, data.map(function (o) { return o.usage; }));

            // Domains
            var x = d3.scaleLinear().domain([0, maxUsage]).range([0, width]);
            var y = d3.scaleLinear().domain([0, maxTrueCost]).range([height, 0]);
            var z = d3.scaleOrdinal().domain([d3.schemeCategory10]);
            z.domain(data.map(function (c) {return c.planRep;}));

            var line = d3.line()
                .x(function(d) {
                    return d.usage;
                })
                .y(function(d) {
                    return d.monthlyTrueCost;
                });

            // Add an SVG element with the desired dimensions and margin.
            var graph = d3.select("#planLineChart")
                .append("svg:svg")
                .attr("width", width + margins[1] + margins[3])
                .attr("height", height + margins[0] + margins[2])
                .append("svg:g")
                .attr("transform", "translate(" + margins[3] + "," + margins[0] + ")")
                .attr("fill", "none")
                .attr("stroke", "#000");


            // Create Axi
            var xAxis = d3.axisBottom().scale(x);
            graph.append("svg:g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis);

            var yAxis = d3.axisLeft().scale(y);
            graph.append("svg:g")
                  .attr("class", "y axis")
                  .attr("transform", "translate(-25,0)")
                  .call(yAxis);

            // Add the line by appending an svg:path element with the data line we created above
            // do this AFTER the axes above so that the line is above the tick-lines
            graph.append("svg:path")
               .attr("d", line(data))
               .style("stroke", function (d) { return z(d.planRep); });

我的解决方案是添加我从this example看到的最后一行，从“.style”开始，但它有一个错误，说输入未定义。我应该自己调用这个函数，还是完全偏离基础？

D3多系列图表显示一行中的所有数据

0 个答案: