d3の棒グラフに要素を描画する

こんにちは私は、年の配列を取り、それらの頻度をプロットするヒストグラムチャートを作成しようとしています。今はこれがグラフの軸線を描いていますが、実際の棒線は描かれていません。理由はわかりません。d3の棒グラフに要素を描画する

<!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 d.x1; }) 
        .attr("y", function(d) { console.log("lenth" + d.length);return d.length; }) 
        .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>

出典

2017-04-18 Travis Cole

あなたは、いくつかのエラーを持っている：

rect要素は、その内部のコンテンツを持つことができないので、この部分が間違っている

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); });

バーが実際に描画されますが、あなたがd.x1を指定xポジションは2000を超えていますので、検査したときにバーがページ外に描画されます（クロムE）

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

代わりにスケールを使用する必要があり、以前に宣言し、そう .attr("x", function(d) { console.log("X" + d.x1);return x(d.x1); })

てきた私は、あなたがを実行し続けることができ、これらの2つの項目、および準備されたスニペットを、変更しましたここから作業する

<!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>

出典

2017-04-18 19:17:44 bumbeishvili

d3の棒グラフに要素を描画する

答えて

関連する問題