Question

似乎无法找到为什么此代码不会使用D3库呈现条形图。我想我已经正确放置了数据结构。

更改数据在数组中的放置方式。有些人不在数组范围内吗？不胜感激任何想法：

<pre>

<!DOCTYPE html>
<meta charset="utf-8">
<head></head>
<body>
<p>Word Counter Chart</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>

<script type='text/javascript' src='js/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='js/jquery-migrate.min.js?ver=1.2.1'></script>

<div>
<p>Word frequency counter, paste text in the first text area. Case, punctuation and words that only appear once are ignored.</p>

<p><textarea id="countthistext" style="width:90%; height: 8em;" onchange="freqCount()"></textarea><br/>

Paste words up there ^ and click down there v<br/>

<textarea id="histcount" style="width:90%; height: 8em;"></textarea><br/>

<script>
freqCount = function() {
str = jQuery("#countthistext").val()
words = str.toLowerCase().replace(/[^a-z\-]/g," ").split(" ")
}
 var values = words;

// calculate frequency for each word in the list
var groups = _(values).chain()
    .groupBy(_.identity)
    .map(function (values, key) {
        return {
            freq: values.length,
            value: key
        };
    })
    .sortBy(function (d) { return d.value; })
    .value();

var maxFreq = d3.max(groups, function (d) { return d.freq});

var width = 400,
    height = 200;

var svg = d3
  .select('body')
  .append('svg')
  .attr('width', width + 100)
  .attr('height', height)
  .append('g');

var padding = 3;
var barHeight = height / groups.length - padding;

var yScale = d3.scale.linear()
    .domain([0, groups.length])
    .range([0, height]);

var xScale = d3.scale.linear()
    .domain([0, maxFreq])
    .range([0, width]);

var bars = svg.selectAll('.bar')
  .data(groups)
  .enter().append('g');

bars
    .append('rect')
    .attr('x', 0)
    .attr('y', function (d, i) { return yScale(i); })
    .attr("width", function (d) { return xScale(d.freq); })
    .attr("height", barHeight)
    .attr('fill','steel');

bars.append('text')
    .text(function (d) { return d.value; })
    .attr('x', function (d) { return 10 + xScale(d.freq); })
    .attr('y', function (d, i) { return yScale(i); })
    .attr('dy', '1em');  
</script>

</body>
</html>
</pre>

我可能很遗憾。

D3条形图，不工作

0 个答案: