使用Json的D3.js垂直堆积条形图

Question

我想要一个带有x轴和y轴标签的垂直堆叠条形图，以及显示值和图例的工具提示。请告诉我如何缩小图表的大小....

现在条形图条形图显示尺寸非常大但没有x轴和y轴... amd工具提示和图例也没有来......

            var w = 700,
            h = 500;
            var margin = {top: 25, right: 75, bottom: 85, left: 85};
            // create canvas
            var svg = d3.select("#bar-chart").append("svg:svg")
            .attr("class", "chart")
            .attr("width", w)
            .attr("height", h )
            .append("svg:g")
            .attr("transform", "translate(10,470)");

            x = d3.scale.ordinal().rangeRoundBands([0, w-50]);
            y = d3.scale.linear().range([0, h-50]);
            z = d3.scale.ordinal().range(["yellow", "grey", "orange"]);

            var colors =    [["Cat 980", "#D0D0D0"],
                             ["Kom500", "#4DAF4A"],
                             ["Kom501", "#D0D0D0"],
                            ["Kom502", "#D0D0D0"]];

            console.log("RAW MATRIX---------------------------");
        // 4 columns: ID,c1,c2,c3
            var matrix = [
                [ 1,  5871, 8916, 2868],
                [ 2, 10048, 2060, 6171],
                [ 3, 16145, 8090, 8045],
                [ 4,   990,  940, 6907]
            ];
            console.log(matrix);

            console.log("REMAP---------------------------");
            var remapped =["c1","c2","c3"].map(function(dat,i){
                return matrix.map(function(d,ii){
                    return {x: ii, y: d[i+1] };
                });
            });
            console.log(remapped);

            console.log("LAYOUT---------------------------");
            var stacked = d3.layout.stack()(remapped);
            console.log(stacked);

            var xScale = d3.scale.ordinal().domain(d3.range(stacked.length)).rangeRoundBands([0, w], 0.05); 
            // ternary operator to determine if global or local has a larger scale
            var yScale = d3.scale.linear().domain([0, d3.max(remapped)]).range([h, 0]);

            var xAxis = d3.svg.axis().scale(xScale).tickFormat(function(d) { return stacked[d].keyword; }).orient("bottom");
            var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);





            x.domain(stacked[0].map(function(d) { return d.x; }));
            y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);

            // show the domains of the scales              
            console.log("x.domain(): " + x.domain())
            console.log("y.domain(): " + y.domain())
            console.log("------------------------------------------------------------------");

            // Add a group for each column.
            var valgroup = svg.selectAll("g.valgroup")
            .data(stacked)
            .enter().append("svg:g")
            .attr("class", "valgroup")
            .style("fill", function(d, i) { return z(i); })
            .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); });

         // xAxis
            svg.append("g") // Add the X Axis
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (h) + ")")
                .call(xAxis)
                .selectAll("text")
                    .style("text-anchor", "end")
                    .attr("dx", "-.8em")
                    .attr("dy", ".15em")
                    .attr("transform", function(d) {
                            return "rotate(-25)";
                    })
                    ;
            // yAxis
            svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(0 ,0)")
                .call(yAxis)
                ;
            // xAxis label

            svg.append("text") 
                .attr("transform", "translate(" + (w / 2) + " ," + (h + margin.bottom - 5) +")")
                .style("text-anchor", "middle")
                .text("Keyword");
            //yAxis label
            svg.append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 0 - margin.left)
                    .attr("x", 0 - (h / 2))
                    .attr("dy", "1em")
                    .style("text-anchor", "middle")
                    .text("Product");

            // Add a rect for each date.
            var rect = valgroup.selectAll("rect")
            .data(function(d){return d;})
            .enter().append("svg:rect")
            .attr("x", function(d) { return x(d.x); })
            .attr("y", function(d) { return -y(d.y0) - y(d.y); })
            .attr("height", function(d) { return y(d.y); })
            .attr("width", x.rangeBand());

            // add legend   
            var legend = svg.append("g")
                    .attr("class", "legend")
                    .attr("transform", "translate(70,10)")
                    ;
            var legendRect = legend.selectAll('rect').data(colors);

            legendRect.enter()
                .append("rect")
                .attr("x", w - 65)
                .attr("y", 0)                                       // use this to flip horizontal
                .attr("width", 10)
                .attr("height", 10)
                .attr("y", function(d, i) {
                    return i * 20;
                })
            //  .attr("x", function(d, i){return w - 65 - i * 70}) // use this to flip horizontal
                .style("fill", function(d) {
                    return d[1];
                });

            var legendText = legend.selectAll('text').data(colors);

            legendText.enter()
                .append("text")
                .attr("x", w - 52)
                .attr("y", function(d, i) {
                    return i * 20 + 9;
                })
                .text(function(d) {
                    return d[0];
                });
            svg.select("g.x").call(xAxis);
            svg.select("g.y").call(yAxis);