Javascript 焦点中的分析错误+；在主干应用程序中使用上下文图

我正在将JSON数据传递给我的主干应用程序中的focus+上下文图，在这里我可以得到

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

我有两个文件，一个是base，它有以下代码：

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

我不知道我哪里出了问题。

试试D3.js中的

focus+context

图

d

属性实际上是一个包含一系列路径描述的字符串

这些路径由以下元素的组合组成：

• 移动到
• 莱恩托
• 曲线图
• 阿尔托
• 封闭路径

---

请检查

d

属性中的数据。

您在这个区域得到了什么。。？（.attr（“clip path”，“url（#clip）”）.attr（“d”，this.area）；）试试这个例子。@Manoj谢谢你的例子。我会尽量让你知道这是否有助于我解决我的问题。@Manoj非常感谢。您在代码中的注释对理解和正确使用代码有很大帮助。