D3Demo

In this example below you will see how to do a D3Demo with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by qinghaozhao, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright qinghaozhao ©
  • HTML
  • CSS
  • JavaScript
    <div class="d3Demo"> 测试一个数据1 </div>
<div class="d3Demo"> 测试一个数据2 </div>



<div class="d3Demo1"> 图形 1425453</div>
<div class="d3shape">  </div>
<div class="d3shape1"></div>

/*Downloaded from https://www.codeseek.co/qinghaozhao/d3demo-qaYaEJ */
    .rect:hover{
  fill: #ff0000;
}
.xAxis{
  width:500px
}

.yAxis{
  height:500px;
}

.svg1{
  width:500px;
  height:500px;
}


/*Downloaded from https://www.codeseek.co/qinghaozhao/d3demo-qaYaEJ */
    $(document).ready(onReady)
var d3Str = "aefawef";
var div1;
var dataset = [ 250 , 210 , 170 , 130 , 90 ,33,56,75,11,22,33,44 ];

function onReady(){
 div = $(".d3Demo");
 div.click(onClick);
  addShape();
  initshape1();
}

function onClick(){
  d3Str = "呵呵";
  //console.log("afwefewf");
  dis = d3.selectAll(".d3Demo");
  console.log(dis);

  dis.style("color","red");
}


function addShape(){
  console.log(d3);
  var linear = d3.scaleLinear();
  linear.domain([0, 250])
  .range([0, 200]);
  
var xAxis = d3.axisTop(linear);
 xAxis.ticks(5);
 
  
  var svg = d3.select(".d3shape").append("svg");
  svg.attr("class", "axis")
.attr("width", 250)
.attr("height", 500)
.append("g")
.attr("transform", "translate(0,30)")
.call(xAxis);

  
  var rect = svg.selectAll("rect").data(dataset).enter().append("rect");
  rect.attr("x",10);
  rect.attr("y",function(d,i){
         return i * 25+50;
  })
  rect.attr("width",function(d){
    return linear(d);
  });
  rect.attr("height",20);
  rect.attr("fill","blue");
}

function initshape1(){
    
  var width = 500;
  var height = 300;
  var zhuwidth = 30;
  
  //创建两个比例尺 一x比例尺 输入0-12(相当于月份);
  //y 比例尺输出 值(每月具体数据)
  //domain 注意给定的值,这个影响图形(具体值)显示 以及刻度显示
  var xs = d3.scaleLinear().domain([0,12]).range([0,300]);
  var ys = d3.scaleLinear().domain([250,0]).range([0,300]);
  
  //获取底部(向上)轴 并将x轴比例扔进去
  var xAxis = d3.axisBottom(xs);
  //比例尺12个刻度
  xAxis.ticks(12);
  //获取左边(向右)轴 并将y比例尺扔进去
  var yAxis = d3.axisLeft(ys);
  //5个刻度
  yAxis.ticks(5);

  //添加矢量
  var svg = d3.select(".d3shape1").append("svg");
  //设置图形大小
  svg.attr("class", "axis")
  svg.attr("width",600);
  svg.attr("height",600);
  //添加x轴到html 并设置位置为 底部
  svg.append("g")
    .attr("transform", "translate(40,300)")
    .attr("class","x axis")
    .call(xAxis)

  //添加y轴到最左侧
  svg.append("g")
  	.attr("transform", "translate(30,0)")
    .attr("class","y axis")
    .call(yAxis);
  //设置数据并添加所有rect
  rect = svg.selectAll(".rect")
    .data(dataset)//设置数据
    .enter()//不知道
    .append("rect")//添加rect
  
  rect.attr("class","rect"); //设置样式
  rect.attr("transform", "translate(40,0)")//位置移到位置;
  //计算每个柱图的位置及高度
  rect.attr("x",function(d,i){
    return i*25 +3;
  });
  rect.attr("y",function(d){
  	console.log(d);
    return  ys(d);
  });
  rect.attr("width",20);
  rect.attr("height",function(d){
    return  300 -ys(d) ;
  })
}

Comments