D3.jsの箇条書きの詳細な説明

Detailed Explanation Bullet Charts D3

<meta charset='utf-8'> <style> body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif margin: auto padding-top: 40px position: relative width: 960px } button { position: absolute right: 10px top: 10px } .bullet { font: 10px sans-serif } .bullet .marker { stroke: #000 stroke-width: 2px } .bullet .tick line { stroke: #666 stroke-width: .5px } .bullet .range.s0 { fill: #eee } .bullet .range.s1 { fill: #ddd } .bullet .range.s2 { fill: #ccc } .bullet .measure.s0 { fill: lightsteelblue } .bullet .measure.s1 { fill: steelblue } .bullet .title { font-size: 14px font-weight: bold } .bullet .subtitle { fill: #999 } style> <button>Updatebutton> <script src='//d3js.org/d3.v3.min.js'>script> <script src='bullet.js'>script> <script> //Define the margin attribute and the width and height of the bullet chart var margin = {top: 5, right: 40, bottom: 20, left: 120}, width = 960 - margin.left - margin.right, height = 50 - margin.top - margin.bottom var chart = d3.bullet() //Initialize a bullet graph object .width(width) //Set the width of the bullet chart .height(height) //Set the height of the bullet chart d3.json('bullets.json', function(error, data) { if (error) throw error var svg = d3.select('body').selectAll('svg') .data(data) // Bind the data in bullets.json to the svg element .enter().append('svg') .attr('class', 'bullet') // Define class = 'bulltet' for the svg element .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') .call(chart) // Use the generated svg as a parameter of the chart function object and call the bullet.js // The bullet(g) function performs a series of operations to generate a bullet graph var title = svg.append('g') .style('text-anchor', 'end') //Set the position of the bullet chart text label at the upper left of the text base point .attr('transform', 'translate(-6,' + height / 2 + ')')//Define the transformation matrix of the text title.append('text') // Define the content of the text .attr('class', 'title') .text(function(d) { return d.title }) title.append('text') // Define the content of the subtitle .attr('class', 'subtitle') .attr('dy', '1em') .text(function(d) { return d.subtitle }) //Randomly transform the data, update the bullet graph, and define the transition time as 1000 milliseconds d3.selectAll('button').on('click', function() { svg.datum(randomize).call(chart.duration(1000)) // TODO automatic transition }) }) // Update the ranges, markers and measures data of the bullet chart function randomize(d) { if (!d.randomizer) d.randomizer = randomizer(d) d.ranges = d.ranges.map(d.randomizer) d.markers = d.markers.map(d.randomizer) d.measures = d.measures.map(d.randomizer) return d } // Method of randomly transforming bullet chart data function randomizer(d) { var k = d3.max(d.ranges) * .2 return function(d) { return Math.max(0, d + k * (Math.random() - .5)) } } script>

これが箇条書きの解釈です...