Question

我是D3的新手，并尝试向areapath添加一些积分（圈子）。 areapath是使用地理坐标创建的。我想在路径中添加的点存在于构成areapath的集合中。这些点并没有沿着这条路径排成一列。对于x和y，它们都不一致但是很接近。我认为我的规模有所不同，但我不确定。我正在修改我发现的一些代码。

这会添加区域路径：

  _applyData: function () {
    var xdomain = d3.extent(this._data, function(d) {
        return d.dist;
    });
    var ydomain = d3.extent(this._data, function(d) {
        return d.altitude;
    });
    var opts = this.options;

    if (opts.yAxisMin !== undefined && (opts.yAxisMin < ydomain[0] || opts.forceAxisBounds)) {
        ydomain[0] = opts.yAxisMin;
    }
    if (opts.yAxisMax !== undefined && (opts.yAxisMax > ydomain[1] || opts.forceAxisBounds)) {
        ydomain[1] = opts.yAxisMax;
    }

    this._x.domain(xdomain);
    this._y.domain(ydomain);
    console.log(this._data);

    this._areapath.datum(this._data)
        .attr("d", this._area);
    this._updateAxis();

    this._fullExtent = this._calculateFullExtent(this._data);
}

这会增加分数

_applyPointData: function () {        
    var xdomain = d3.extent(this._data, function(d) {
        return d.dist;
    });
    var ydomain = d3.extent(this._data, function(d) {
        return d.altitude;
    });
    var opts = this.options;

    if (opts.yAxisMin !== undefined && (opts.yAxisMin < ydomain[0] || opts.forceAxisBounds)) {
        ydomain[0] = opts.yAxisMin;
    }
    if (opts.yAxisMax !== undefined && (opts.yAxisMax > ydomain[1] || opts.forceAxisBounds)) {
        ydomain[1] = opts.yAxisMax;
    }

    this._x.domain(xdomain);
    this._y.domain(ydomain);


    var g = d3.select(this._container).select("svg").select("g");

    var xScale = d3.scale.linear()
             .domain([d3.max(this._data, function (d) { return d.x; }),d3.min(this._data, function (d) { return d.x; })])
             .range([0, this._width()]);

    var yScale = d3.scale.linear()
             .domain([d3.min(this._data, function (d) { return d.altitude; }), d3.max(this._data, function (d) { return d.altitude; })])
             .range([this._height(), 0]);



        var gjson = this.options.photoData;
        data = gjson;

        var mark = g.selectAll(".mark")
         .data(data.marks)
         .enter().append("g")
         .attr("class", "mark");

        mark.attr("transform", function (d) { return "translate(" + xScale(d.x) + "," + yScale(d.altitude) + ")"; });

        mark.append("svg:circle")
        .attr('class', 'mark')
        .attr("dx", 0)
        .attr("dy", 0)
        .attr("r", 3.5);       

}

这是区域

   var x = this._x = d3.scale.linear()
        .range([0, this._width()]);

    var y = this._y = d3.scale.linear()
        .range([this._height(), 0]);

 var area = this._area = d3.svg.area()
        .interpolate(opts.interpolation)
        .x(function(d) {
            return x(d.dist);
        })
        .y0(this._height())
        .y1(function(d) {
            return y(d.altitude);
        });

D3点在areapath图表上

0 个答案: