score:0

Accepted answer

You have several errors:

  1. rect element cannot have content inside it, so this part is wrong

    bar.append("rect").attr("x", 1)
                            .attr("width", barWidth)
                            .attr("height", function(d) { return maxBarHeight - d.length;  });
    
    
    
    
     bar.append("text")
            .attr("class", "axis-label")
            .attr("dy", "-.75em")
            .attr("y", 6)
            .attr("x", barWidth / 2)
            .attr("text-anchor", "middle")
            .text(function(d) { return formatCount(d.length); });
    
  2. Bars actually are drawing, but you specified d.x1 for x position, which is more than 2000, when I have inspected it, so bars are drawing outside of page (you can inspect it from chrome)

    .attr("x", function(d) { console.log("X" + d.x1);return d.x1; })

    instead should be used scales, you have declared earlier , so .attr("x", function(d) { console.log("X" + d.x1);return x(d.x1); })

I have changed these 2 items , and prepared snippet, which you can run and continue working from here

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="chart"></div>

<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  <script>
  
    var data1 = [2000, 2001, 2012,2013,2013,2014];
    d3  .select('#chart')
        .datum(data1)
        .call(histogramChart()
            .width(700)
            .height(250)
            .lowerBand(2000)
            .upperBand(2016)
            .bins(17)
            .yAxisLabel("# of Organizations")
            .xAxisLabel("Year")
        );
    function histogramChart(){
        var margin = {
            top: 64,
            right: 32,
            bottom: 72,
            left: 32,
            labels: 32
        };
        //defaults
        var height = 200;
        var width = 500;
        var lowerBand = 2000;
        var upperBand = 2017;
        var bins = 17;
        var chartTitle = ["Selected Partner Organizations Per Year"];
        var yAxisLabel = "y axis label";
        var xAxisLabel = "x axis label";
        var xformat = function(d){return d};
        var formatCount = d3.format(",.0f");
        function chart(selection) {
            var maxBarHeight = height - (margin.top + margin.bottom);
            var chartWidth = width - margin.right - margin.left;
            selection.selectAll('svg').remove();//remove old charts
            selection.each(function(values) {
                var x = d3.scaleLinear()
                    .domain([lowerBand, upperBand])
                    .range([margin.labels, chartWidth]);
                // Generate a histogram using XX bins.
                var data = d3.histogram()
                    .thresholds(x.ticks(bins))
                    (values);
                //fill the chart width, with 1px spacing between
                var numBins = data.length;
                var barWidth = parseInt((chartWidth-margin.labels)/numBins) - 1;
                var y = d3.scaleLinear()
                    .domain([0, d3.max(data, function(d) { return d.length; })])
                    .range([maxBarHeight, 0]);
                var xAxis = d3.axisBottom()
                    .scale(x)
                    .tickFormat(xformat);
                var svgContainer = d3.select(this).append("svg")
                    .attr("class", "chart mini-column-chart")
                    .attr("width", width)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
                var bar = svgContainer.selectAll("rect")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "bar")
                    .attr("x", function(d) { console.log("X" + d.x1);return x(d.x1); })
                    .attr("y", function(d) { console.log("lenth" + d.length);return d.length; })
                .attr('stroke','white')
                    .attr("width", barWidth)
                    .attr("height", function(d) { console.log(maxBarHeight - d.length );return maxBarHeight - d.length; });
/*
                svg.selectAll("rect")
                    .attr("x", 1)
                    .attr("transform", function(d) {
                        return "translate(" + x(d.x0) + "," + y(d.length) + ")"; })
                    .attr("width", function(d) { return x(d.x1) - x(d.x0) -1 ; })
                    .attr("height", function(d) { return height - y(d.length); });
                */
                console.log("max: " + maxBarHeight);
                var xAxisG = svgContainer.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate( 0," + (height - margin.top - margin.bottom) + ")")
                    .call(xAxis);
                var header = svgContainer.append("text")
                    .attr("class", "chart-title")
                    .attr("x", width/2)
                    .attr("text-anchor", "middle")
                    .attr("dy", -32)
                    .text(chartTitle);
              /*
                bar.append("rect")
                    .attr("x", 1)
                    .attr("width", barWidth)
                    .attr("height", function(d) { return maxBarHeight - d.length; });
                bar.append("text")
                    .attr("class", "axis-label")
                    .attr("dy", "-.75em")
                    .attr("y", 6)
                    .attr("x", barWidth / 2)
                    .attr("text-anchor", "middle")
                    .text(function(d) { return formatCount(d.length); });
                    */
                xAxisG.append("text")
                    .attr("class", "axis-label")
                    .attr("x", margin.left)
                    .attr("dy", 56)
                    .text(xAxisLabel);
                svgContainer.append("g")
                    .attr("class", "y axis")
                    .append("text")
                    .attr("class", "axis-label")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 8)
                    .attr("x", -(height-margin.top-margin.bottom))
                    .style("text-anchor", "start")
                    .text(yAxisLabel);
            });
        }
        chart.title = function(_) {
            if (!arguments.length) return chartTitle;
            chartTitle = _;
            return chart;
        };
        chart.lowerBand = function(_) {
            if (!arguments.length) return lowerBand;
            lowerBand = _;
            return chart;
        };
        chart.upperBand = function(_) {
            if (!arguments.length) return upperBand;
            upperBand = _;
            return chart;
        };
        chart.width = function(_) {
            if (!arguments.length) return width;
            width = _;
            return chart;
        };
        chart.height = function(_) {
            if (!arguments.length) return height;
            height = _;
            return chart;
        };
        chart.bins = function(_) {
            if (!arguments.length) return bins;
            bins = _;
            return chart;
        };
        chart.xformat = function(_) {
            if (!arguments.length) return xformat;
            xformat = _;
            return chart;
        };
        chart.yAxisLabel = function(_) {
            if (!arguments.length) return yAxisLabel;
            yAxisLabel = _;
            return chart;
        };
        chart.xAxisLabel = function(_) {
            if (!arguments.length) return xAxisLabel;
            xAxisLabel = _;
            return chart;
        };
        chart.focusLabel = function(_) {
            if (!arguments.length) return focusLabel;
            focusLabel = _;
            return chart;
        };
        chart.focusValue = function(_) {
            if (!arguments.length) return focusValue;
            focusValue = _;
            return chart;
        };
        return chart;
    }
  </script>
</body>
</html>


Related Query

More Query from same tag