带有 D3 的折线图 - AngularJS答案

【问题标题】：Line chart with D3 - AngularJS带有 D3 的折线图 - AngularJS
【发布时间】：2018-09-24 02:58:18
【问题描述】：

您好，我正在开发一个带有角度 D3 的折线图，我遇到了一个代码，它可以满足我的需要。当我这样做时，我收到一条错误消息，提示“无法读取未定义的线性属性”。

您能否就此提供一些见解？

下面是我的代码。

app.directive('linearChart', function($window){
    return{
        restrict:'EA',
        template:"<svg width='400' height='200'></svg>",
        link: function(scope, elem, attrs){
            var salesDataToPlot=scope[attrs.chartData];
            var padding = 20;
            var pathClass="path";
            var xScale, yScale, xAxisGen, yAxisGen, lineFun;

            var d3 = $window.d3;
            var rawSvg=elem.find('svg');
            var svg = d3.select(rawSvg[0]);

            function setChartParameters(){

                xScale = d3.scale.linear()
                    .domain([salesDataToPlot[0].hour, salesDataToPlot[salesDataToPlot.length-1].hour])
                    .range([padding + 5, rawSvg.attr("width") - padding]);

                yScale = d3.scale.linear()
                    .domain([0, d3.max(salesDataToPlot, function (d) {
                        return d.sales;
                    })])
                    .range([rawSvg.attr("height") - padding, 0]);

                xAxisGen = d3.svg.axis()
                    .scale(xScale)
                    .orient("bottom")
                    .ticks(salesDataToPlot.length - 1);

                yAxisGen = d3.svg.axis()
                    .scale(yScale)
                    .orient("left")
                    .ticks(5);

                lineFun = d3.svg.line()
                    .x(function (d) {
                        return xScale(d.hour);
                    })
                    .y(function (d) {
                        return yScale(d.sales);
                    })
                    .interpolate("basis");
            }

            function drawLineChart() {

                setChartParameters();

                svg.append("svg:g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0,180)")
                    .call(xAxisGen);

                svg.append("svg:g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(20,0)")
                    .call(yAxisGen);

                svg.append("svg:path")
                    .attr({
                        d: lineFun(salesDataToPlot),
                        "stroke": "blue",
                        "stroke-width": 2,
                        "fill": "none",
                        "class": pathClass
                    });
            }

            drawLineChart();
        }
    };
});

我是这样插入到 html 中的。

<div linear-chart chart-data="salesDataToPlot"></div>

这是我的数据。

$scope.salesDataToPlot =     [
  {
    "effective_date": "2018-03-12T04:00:00.000Z",
    "avg_health_score": "36.54"
  },
  {
    "effective_date": "2018-03-19T04:00:00.000Z",
    "avg_health_score": "36.57"
  },
  {
    "effective_date": "2018-03-26T04:00:00.000Z",
    "avg_health_score": "36.49"
  },
  {
    "effective_date": "2018-04-02T04:00:00.000Z",
    "avg_health_score": "37.07"
  },
  {
    "effective_date": "2018-04-09T04:00:00.000Z",
    "avg_health_score": "39.18"
  }
]

我需要这样的图表。

【问题讨论】：

标签： javascript angularjs d3.js linechart

【解决方案1】：

检查您使用的 d3 版本以及从您获取此代码的地方使用的 3d 版本。使他们匹配。您还可以找到这些版本之间的变化并相应地更新您的代码。

【讨论】：

您可以使用 v3，尝试在 v4 中查找示例，或者尝试对其进行编辑以使其在 v4 中工作。如果你只是想要一个简单的折线图，d3 不是最好的选择。您应该在 d3 之上尝试一个库。有很多好的库可以以更简单的方式做到这一点。

【解决方案2】：

d3 v3 和 d3 v4 之间的主要重大变化之一是它们更改了比例函数的名称。根据您的用例和您对 d3 的经验，您最好的解决方案可能是在您的项目中使用 v3 而不是 v4。

【讨论】：