SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
let center = [
        [0.5, 0.5],
        [0.7, 0.8],
        [0.4, 0.9],
        [0.11, 0.32],
        [0.88, 0.25],
        [0.75, 0.12],
        [0.5, 0.1],
        [0.2, 0.3],
        [0.4, 0.1],
        [0.6, 0.7]
      ]
      console.log(d3.extent(center,function(d) {
        return d[0]
      }));
      
      let width = 500 //SVG绘制区域的宽度
      let height = 500 //SVG绘制区域的高度
      let padding = { top: 30, right: 30, bottom: 30, left: 30 }

      let svg = d3
        .select('body') //选择<body>
        .append('svg') //在<body>中添加<svg>
        .attr('width', width) //设定<svg>的宽度属性
        .attr('height', height) //设定<svg>的高度属性

      let scaleX = d3
        .scaleLinear()
        .domain([
          0,
          1.2 * d3.max(center, function(d) {
            return d[0]
          })
        ])
        .range([0, width - padding.left - padding.right])

      let scaleY = d3
        .scaleLinear()
        .domain([
          1.2 * d3.max(center, function(d) {
            return d[1]
          }),
          0
        ])
        .range([0, height - padding.top - padding.bottom])

      let axisX = d3.axisBottom(scaleX)
      let axisY = d3.axisRight(scaleY)

      svg
        .append('g')
        .call(axisY)
        .attr(
          'transform',
          `translate(${padding.left}, ${padding.top})`
        )
      svg
        .append('g')
        .call(axisX)
        .attr(
          'transform',
          `translate(${padding.left}, ${height - padding.top})`
        )

      let circle = svg
        .selectAll('circle')
        .data(center)
        .enter()
        .append('circle')
        .attr('fill', getColor)
        .attr('cx', function(d) {
          return padding.left + scaleX(d[0])
        })
        .attr('cy', function(d) {
          return padding.top + scaleY(d[1])
        })
        .attr('r', 5)

      function getColor() {
        return '#' + Math.floor(Math.random() * 16777215).toString(16)
      }

            
<div class="container"></div>

            

                
本项目引用的自定义外部资源