Question

这是我第一次使用可重复使用的图表，所以请善待。

我想在一个svg容器中绘制多个小条形图，然后使用row和col属性将条形图放在该svg容器中的特定位置。我试图复制这样的东西。

enter image description here

现在，我并不担心酒吧使用不同的颜色;主要关注的是根本没有显示任何内容。我已经尝试了大量的console.log语句，他们都给出了正确的答案。以下是我的代码和一些示例数据。

var margin = { top: 50, right: 0, bottom: 100, left: 30 },
          width = 960 - margin.left - margin.right,
          height = 430 - margin.top - margin.bottom;

var data = [
    {row: 0, col: 0, value: [{x: 1, y: 19}, {x: 2, y: 20}]},
    {row: 0, col: 1, value: [{x: 1, y: 24}, {x: 2, y: 27}]},
    {row: 1, col: 1, value: [{x: 1, y: 31}, {x: 2, y: 26}]},
    {row: 1, col: 2, value: [{x: 1, y: 29}, {x: 2, y: 19}]},
]

// Bar chart Module
/////////////////////////////////

// Declare namespace
d3.cloudshapes = {};

// Declare component: (this outer function acts as the closure):
d3.cloudshapes.barChart = function module() {
    var margin = {top: 20, right: 20, bottom: 40, left: 40},
        width = 500,
        height = 500,
        gap = 0,
        ease = "bounce";
    var svg;


    // Define the 'inner' function: which, through the surreal nature of JavaScript scoping, can access
    // the above variables. 
    function exports(_selection) {
        _selection.each(function(_data) {
            var chartW = width - margin.left - margin.right,
                chartH = height - margin.top - margin.bottom;

        console.log(chartW);
        console.log(chartW);
        console.log(_data);
        // Define x and y scale variables.
            var x1 = d3.scale.ordinal()
                    .domain(_data.map(function(d) { return d.x; }))
                    .rangeRoundBands([0, chartW], 0.1);

            var y1 = d3.scale.linear()
                    .domain([0, d3.max(_data, function(d, i) { return d.y; })])
                    .range([chartH, 0]);

        console.log(x1.domain());
        console.log(y1.domain());
        // If no SVG exists, create one - and add key groups:
            if (!svg) {
                svg = d3.select(this)
                    .append("svg")
                    .classed("chart", true);
                var container = svg.append("g").classed("container-group", true);
                container.append("g").classed("chart-group", true);
            }

        // Transition the width and height of the main SVG and the key 'g' group: 
            svg.transition().attr({width: width, height: height});
            svg.select(".container-group")
                .attr({transform: "translate(" + margin.left + "," + margin.top + ")"});

        // Define gap between bars: 
            var gapSize = x1.rangeBand() / 100 * gap;

        // Define width of each bar: 
            var barW = x1.rangeBand() - gapSize;

            // Select all bars and bind data:  
            var bars = svg.select(".chart-group")
                    .selectAll(".bar")
                    .data(_data);


        // ENTER, UPDATE and EXIT CODE: 
        // D3 ENTER code for bars!
            bars.enter().append("rect")
                .classed("bar", true)
                .attr({x: chartW,
                    width: barW,
                    y: function(d, i) { return y1(d); },
                    height: function(d, i) { return chartH - y1(d); }
                })

        // D3 UPDATE code for bars 
            bars.transition()
                .ease(ease)
                .attr({
                    width: barW,
                    x: function(d, i) { return x1(i) + gapSize / 2; },
                    y: function(d, i) { return y1(d); },
                    height: function(d, i) { return chartH - y1(d); }
                });

        // D3 EXIT code for bars
            bars.exit().transition().style({opacity: 0}).remove();
        });
    }


    // GETTERS AND SETTERS: 
    exports.width = function(_x) {
        if (!arguments.length) return width;
        width = parseInt(_x);
        return this;
    };
    exports.height = function(_x) {
        if (!arguments.length) return height;
        height = parseInt(_x);
        return this;
    };
    exports.gap = function(_x) {
        if (!arguments.length) return gap;
        gap = _x;
        return this;
};
    exports.ease = function(_x) {
        if (!arguments.length) return ease;
        ease = _x;
        return this;
    };

    return exports;
};

//drawing bar charts using reusable chart
var chart = d3.cloudshapes.barChart()
        .width(120).height(120);

var svg = d3.select("#punchcard").append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
              .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var gcharts = svg.selectAll('g.chart')
        .data(data)
        .enter()
        .append('g')
        .attr('class', 'chart');

// Translate the groups using the row and column
gcharts.attr('transform', function(d) {
    return 'translate(' + 100 * d.row + ',' + d.col + ')';
});

// Create the charts, using the data bound to each selection.

for(var i=0; i<data.length; i++)  {
    var temp_value = data[i].value;
    console.log(temp_value);
    gcharts.datum(temp_value).call(chart);

}

非常基本的标记：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <script data-require="d3@*" data-semver="3.4.1" src="http://d3js.org/d3.v3.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script_2.js"></script>
  </head>

  <body>

<style>
.axis path,
.axis line {
    fill: none;
    stroke: #eee;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

.loading {
    font-family: sans-serif;
    font-size: 15px;
}

.circle {
    fill: #222;
}
</style>


<div id="punchcard"></div>
<script src="resuable_barchart.js"></script>
  </body>

</html>

小提琴：http://jsfiddle.net/vsutC/

非常感谢任何帮助或指示。

可重复使用的条形图显示什么都没有

0 个答案: