Question

我正在使用D3可重用图表来绘制散点图。但是，当我传入不同的数据时，我得到两个相同的图：

但是我期待右边的那个是：

下面是我的代码（scatterplot.js）

d3.custom = {};


d3.custom.scatterplot = function module() {
    var margin = {top: 30, right: 40, bottom: 50, left: 30},
    width = 560,
    height = 500,
    xValue ='IslandArea',
    yValue='LandTaxonomicDiversity',
    y2Value='LandPhylogeneticMean',
    y3Value='LandFunctional',
    xLabel='Island Size km squared (Log Scale)',
    yLabel = 'Taxonomic + Functional Diversity',
    y2Label='Phylogenetic Mean',
    _index = 0;


    var svg;

        function exports(_selection) {
        _selection.each(function(_data) {


            var x = d3.scale.log()
                .range([0, width]);

            var y = d3.scale.linear()
                .range([height, 0]);

            var y2 = d3.scale.linear()
                .range([height, 0]);


            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .tickFormat(function (d) {
                    return x.tickFormat(4,d3.format(",d"))(d)
                });

            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left");

            var yAxis2 = d3.svg.axis()
                .scale(y2)
                .orient("right");


            if (!svg) {
                 svg = d3.select(this).append('svg');
                 var container = svg.append('g').classed('container-group', true);

            }

            svg.attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom);

            container
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

              x.domain(d3.extent(islands, function(d) { return d[xValue]; })).nice();
              y.domain(d3.extent(islands, function(d) { return d[yValue]; })).nice();
              y2.domain(d3.extent(islands, function(d) { return d[y2Value]; })).nice();

               //x-axis labels
              container.append("g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis)
                  .selectAll("text")    
                        .style("text-anchor", "end")
                        .attr("dx", "-.8em")
                        .attr("dy", ".15em")
                        .attr("transform", function(d) {
                            return "rotate(-65)" 
                        });

               //x-axis title label
                container.append("g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .append("text")
                  .attr("class", "label")
                  .attr("x", width)
                  .attr("y", -6)
                  .style("text-anchor", "end")
                  .text(xLabel);

             //y-axis title label
              container.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                  .append("text")
                  .attr("class", "label")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 6)
                  .attr("dy", ".71em")
                  .style("text-anchor", "end")
                  .text(yLabel);

                  //y2-axis title label
                  container.append("g")
                      .attr("class", "y axisRed")
                      .attr("transform", "translate( " + width + ", 0 )")
                      .call(yAxis2)
                    .append("text")
                      .attr("class", "label")
                      .attr("transform", "rotate(-90)")
                      .attr("y", -12)
                      .attr("dy", ".71em")
                      .style("text-anchor", "end")
                      .text(y2Label);

                container.selectAll(".dot"+_index)
                  .data(_data)
                .enter().append("circle")
                  .attr("class", "dot")
                  .attr("r", 3.5)
                  .attr("cx", function(d) { return x(d[xValue]); })
                  .attr("cy", function(d) { return y(d[yValue]); })
                  .style("fill", '#72A8FF');

              container.selectAll(".dot2"+_index)
                  .data(_data)
                .enter().append("circle")
                  .attr("class", "dot")
                  .attr("r", 3.5)
                  .attr("cx", function(d) { return x(d[xValue]); })
                  .attr("cy", function(d) { return y2(d[y2Value]); })
                  .style("fill", '#D65734');

                container.selectAll(".dot3"+_index)
                  .data(_data)
                .enter().append("circle")
                  .attr("class", "dot")
                  .attr("r", 3.5)
                  .attr("cx", function(d) { return x(d[xValue]); })
                  .attr("cy", function(d) { return y(d[y3Value]); })
                  .style("fill", '#96BF52');

            })

        }
        exports.xValue = function(value) {
            if (!arguments.length) return xValue;
            xValue = value;
            return this;
        }


        exports.yValue = function(value) {
            if (!arguments.length) return yValue;
            yValue = value;
            return this;
        }

        exports.y2Value = function(value) {
            if (!arguments.length) return y2Value;
            y2Value = value;
            return this;
        }

        exports.y3Value = function(value) {
            if (!arguments.length) return y3Value;
            y3Value = value;
            return this;
        }

        exports.xLabel = function(value) {
            if (!arguments.length) return xLabel;
            xLabel = value;
            return this;
        }

        exports.yLabel = function(value) {
            if (!arguments.length) return yLabel;
            yLabel = value;
            return this;
        }

        exports.y2Label = function(value) {
            if (!arguments.length) return y2Label;
            y2Label = value;
            return this;
        }


        exports._index = function(value) {
            if (!arguments.length) return _index;
            _index = value;
            return this;
        }


        return exports;

}

我正在调用index.html

中的可重用图表

var chart = d3.custom.scatterplot();
 chart._index(0);

 d3.select('#chart')
    .datum(islands)
    .call(chart);

 var chart2 = d3.custom.scatterplot();
    chart2.yValue='SeaTaxonomicDiversity';
    chart2.y2Value='SeaPhylogeneticMean';
    chart2.y3Value='SeaFunctional';
    chart2._index(1);

 d3.select('#chart2')
    .datum(islands)
    .call(chart2);

这是我数据（岛屿）的一个子集

var islands = [
 {
   "IslandName": "Aguni",
   "IslandArea": 8.318375,
   "LandTaxonomicSppRichness": 52,
   "LandTaxonomicDiversity": 0.248803828,
   "LandPhylogeneticMean": 123.7078045,
   "LandFunctional": 0.156035543,
   "SeaTaxonomicSppRichness": 40,
   "SeaTaxonomicDiversity": 0.36036036,
   "SeaPhylogeneticMean": 135.7567553,
   "SeaFunctional": 0.863222553
 },
 {
   "IslandName": "Aka",
   "IslandArea": 5.494098,
   "LandTaxonomicSppRichness": 23,
   "LandTaxonomicDiversity": 0.110047847,
   "LandPhylogeneticMean": 115.1805745,
   "LandFunctional": 0.049391202,
   "SeaTaxonomicSppRichness": 29,
   "SeaTaxonomicDiversity": 0.261261261,
   "SeaPhylogeneticMean": 134.6545472,
   "SeaFunctional": 0.658507638
 },
 {
   "IslandName": "Amami",
   "IslandArea": 1262.286791,
   "LandTaxonomicSppRichness": 108,
   "LandTaxonomicDiversity": 0.516746411,
   "LandPhylogeneticMean": 144.8765955,
   "LandFunctional": 0.395404657,
   "SeaTaxonomicSppRichness": 70,
   "SeaTaxonomicDiversity": 0.630630631,
   "SeaPhylogeneticMean": 133.3213145,
   "SeaFunctional": 0.893277159
 };

现在，两个图形上都显示yValue，y2Value和y3Value的默认值。但是对于第二个图表，我传递了我想要显示的名称值，但由于某种原因它仍然可视化默认值。

D3可重复使用的图表在两个不同的图表上绘制相同的数据

0 个答案: