javascript - 在 Backbone 应用中使用时，焦点+上下文图中的解析错误

我正在将JSON数据传递给我得到的主干应用程序中的焦点+上下文图

错误：解析d =“ MNaN，50CNaN，50，NaN，50，NaN，50SNaN，50，NaN，50SNaN，50，NaN，50SNaN，50，NaN，50SNaN，50，NaN，50SNaN，50，NaN，50SNaN时出现问题，50，NaN，50LNaN，50CNaN，50，NaN，50SNaN，50，NaN，50SNaN，50，NaN，50SNaN，50，NaN，50SNaN，50，NaN，50SNaN，50 ，NaN，50Z“

我有两个文件，一个是基本文件，其中包含以下代码：

defaults: {
margin: {top: 40, right: 20, bottom: 30, left: 40},
margin2: {top: 430, right: 10, bottom: 20, left: 40},
},
onRender: function() {
        var that = this;
        var margin = this.options.margin;
        var margin2 = this.options.margin2;

        this.height = (this.options.height)? this.options.height - margin.left - margin.right: 500 - margin.left - margin.right,
        this.width = (this.options.width)? this.options.width - margin.top - margin.bottom: 960 - margin.top - margin.bottom,
        this.height2 = 500 - margin2.top - margin2.bottom;

        this.svg = d3.select(this.el).append("svg")
            .attr("width", this.width + margin.left + margin.right)
            .attr("height", this.height + margin.top + margin.bottom)
          .append("defs").append("clipPath")
            .attr("id", "clip")
          .append("rect")
            .attr("width", this.width)
            .attr("height", this.height);

        this.focus = this.svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        this.context = this.svg.append("g")
            .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

        this.initializeChart && this.initializeChart()

        this.scales = {
            x: this.getXScale(),
            x2: this.getX2Scale(),
            y: this.getYScale(),
            y2: this.getY2Scale()
        };


        this.renderAxes();
        this.renderData();

        return this;

    }

这是我的另一个文件。

getXScale : function(){
        return d3.time.scale().range([0, this.width])
    },
    getX2Scale : function(){
        return d3.time.scale().range([0, this.width])
    },
    getYScale : function(){
        return d3.scale.linear().range([this.height, 0])
    },
    getY2Scale : function(){
        return d3.scale.linear().range([this.height2, 0])
    },
    renderAxes : function(){
        var that = this;
        this.xAxis = d3.svg.axis()
            .scale(this.scales.x)
            .orient("bottom"),
        this.xAxis2 = d3.svg.axis()
            .scale(this.scales.x2)
            .orient("bottom"),
        this.yAxis = d3.svg.axis()
            .scale(this.scales.y)
            .orient("left");

        this.brush = d3.svg.brush()
            .x(this.scales.x2)
            .on("brush", this.brushed);

        this.area = d3.svg.area();
        this.area = this.area.interpolate("monotone")
        this.area =this.area.x(
            function(d) {
                var that1 = that;
                return that1.scales.x(d.x);
            })
        this.area =this.area.y0(this.height)
        this.area =this.area.y1(
            function(d) {
                var that1 = that;
                return that1.scales.y(d.y);
            });

        this.area2 = d3.svg.area()
            .interpolate("monotone")
            .x(function(d) {
                var that1 = that;
                return that1.scales.x2(d.x); })
            .y0(this.height2)
            .y1(function(d) {
                var that1 = that;
             return that1.scales.y2(d.y); });
    },
    brushed : function() {
        this.scales.x.domain(brush.empty() ? this.scales.x2.domain() : brush.extent());
        focus.select("path").attr("d", area);
        focus.select(".x.axis").call(xAxis);
    },
    renderData : function(){
        var that = this;
        var x = this.scales.x,
        y = this.scales.y,
        x2 = this.scales.x2,
        y2 = this.scales.y2,
        data = this.options.data;

        x.domain(d3.extent(data.map(function(d) { return d.XPoint; })));
        y.domain([0, d3.max(data.map(function(d) { return d.values; }))]);
        x2.domain(x.domain());
        y2.domain(y.domain());

        this.focus.append("path")
          .datum(data)
          .attr("clip-path", "url(#clip)")
          .attr("d", this.area);

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

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

        this.context.append("path")
          .datum(data)
          .attr("d", this.area2);

        this.context.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + this.height2 + ")")
          .call(this.xAxis2);

        this.context.append("g")
          .attr("class", "x brush")
          .call(this.brush)
        .selectAll("rect")
          .attr("y", -6)
          .attr("height", this.height2 + 7);
    },
});

我不知道我要去哪里错了。

最佳答案

尝试将此example用于D3.js中的focus + context图。

d属性实际上是一个字符串，其中包含一系列路径描述。

这些路径包含以下元素的组合：


搬去
Lineto
Curveto
Arcto
封闭路径


请检查d属性中的数据。