在js文件中添加html代码

时间：2017-09-04 10:50:51

标签： javascript html d3.js

我想创建一个d3热轮。代码位于以下链接http://prcweb.co.uk/lab/circularheat/。我有一个仪表板（香蕉），用户提示选择图表并添加它。我想要的只是在javascript文件中添加以下HTML代码。 （下面的代码在html文件中（div id =“main”），但我希望它在javascript文件中）

var energy_data = [];
var base_ts = 1283731200000;
var week = 0;
var totals = {days:[], week:0};
var display_mode = 0, display_modes = [{label: 'units', prefix: ''}, {label: '', prefix: '£'}, {label: 'kgs CO2', prefix: ''}];
var week_data;
var unit_cost = 0.137 /* http://www.confusedaboutenergy.co.uk/index.php/domestic-fuels/fuel-prices */, unit_co2 = 0.450 /* from realtimecarbon.org */;

week_data = energy_data.slice(week*7*24,(week+1)*7*24);
totals = calculate_totals(week_data);

var g = d3.select("svg").append("g").attr("id", "chart");

initial_rad = 80;
rad_offset = 25;
ir = function(d, i) {return initial_rad+Math.floor(i/24)*rad_offset;}
or = function(d, i) {return initial_rad+rad_offset+Math.floor(i/24)*rad_offset;}
sa = function(d, i) {return (i*2*Math.PI)/24;}
ea = function(d, i) {return ((i+1)*2*Math.PI)/24;}

//Draw the chart
var color = d3.scale.linear().domain([0.04, 1]).range(["white", "red"]);
d3.select('#chart').selectAll('path').data(week_data)
	.enter().append('svg:path')
	.attr('d', d3.svg.arc().innerRadius(ir).outerRadius(or).startAngle(sa).endAngle(ea))
	.attr('transform', 'translate(300, 300)')
  	.attr('fill', color)
	.attr("stroke", "gray")
	.attr("stroke-width", "0.3px")
	.on('mouseover', render_hour_info)
	.on('mouseout', reset_hour_info);

//Labels
var day_labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
var label_rad = 90;
for(var i=0; i<7; i++) {
	label = day_labels[i];
	label_angle = 4.73;
	d3.select("svg").append("def")
	  .append("path")
	  .attr("id", "day_path"+i)
	  .attr("d", "M300 300 m"+label_rad*Math.cos(label_angle)+" "+label_rad*Math.sin(label_angle)+" A"+label_rad+" "+label_rad+" 90 0 1 "+(300+label_rad)+" 300");
	d3.select("svg").append("text")
	  .attr("class", "day label")
	  .append("textPath")
	  .attr("xlink:href", "#day_path"+i)
	  .text(label);
	label_rad += rad_offset;
}

label_rad = 260;
d3.select("svg").append("def")
	.append("path")
	.attr("id", "time_path")
	.attr("d", "M300 "+(300-label_rad)+" a"+label_rad+" "+label_rad+" 0 1 1 -1 0");
for(var i=0; i<24; i++) {
	label_angle = (i-6)*(2*Math.PI/24);
	large_arc = i<6 || i> 18? 0 : 1;
	d3.select("svg").append("text")
		.attr("class", "time label")
		.append("textPath")
		.attr("xlink:href", "#time_path")
		.attr("startOffset", i*100/24+"%")
		.text(convert_to_ampm(i));
}

reset_hour_info();

//Define events
d3.selectAll("#status").on('click', function() {
	display_mode = (display_mode+1)%3;
	reset_hour_info();
});

d3.select('#upweek').on('click', function() {
	if(week>=25) return;
	week++;
	week_data = energy_data.slice(week*7*24,(week+1)*7*24);
	d3.select('#chart').selectAll('path').data(week_data).attr('fill', color);
	totals = calculate_totals(week_data);
	reset_hour_info();
})

d3.select('#downweek').on('click', function() {
	if(week<=0) return;
	week--;
	week_data = energy_data.slice(week*7*24,(week+1)*7*24);
	d3.select('#chart').selectAll('path').data(week_data).attr('fill', color);
	totals = calculate_totals(week_data);
	reset_hour_info();
})



function render_hour_info(d, i) {
	var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
	var day = Math.floor(i/24); //day index
	var h = i%24; //hour index
	var kwh = new Number(d);
	var day_kwh = new Number(totals.days[day]);
	var dm = display_modes[display_mode];

	//Update times
	d3.select('#status g.first text.time').text(days[day]);
	d3.select('#status g.second text.time').text(convert_to_ampm(h)+' - '+convert_to_ampm(parseInt(h)+1));
	d3.select('#status g.third text.time').text('Projection');

	//Update value
	switch(display_mode) {
	  case 0:
	    d3.select('#status g.first text.value').text(dm.prefix+day_kwh.toFixed(1));
	    d3.select('#status g.second text.value').text(dm.prefix+kwh.toFixed(1));
	    d3.select('#status g.third text.value').text(dm.prefix+(day_kwh*365).toFixed(0));
	    break;
	  case 1:
	    d3.select('#status g.first text.value').text(dm.prefix+(unit_cost*day_kwh).toFixed(2));
	    d3.select('#status g.second text.value').text(dm.prefix+(unit_cost*kwh).toFixed(2));
	    d3.select('#status g.third text.value').text(dm.prefix+(unit_cost*day_kwh*365).toFixed(0));
	    break;
	  case 2:
	    d3.select('#status g.first text.value').text(dm.prefix+(unit_co2*day_kwh).toFixed(1));
	    d3.select('#status g.second text.value').text(dm.prefix+(unit_co2*kwh).toFixed(1));
	    d3.select('#status g.third text.value').text(dm.prefix+(unit_co2*day_kwh*365).toFixed(0));
	    break;
	}

	//Update units
	d3.select('#status g.first text.units').text(dm.label);
	d3.select('#status g.second text.units').text(dm.label);
	d3.select('#status g.third text.units').text(dm.label+'/yr');
  }

function reset_hour_info() {
	var dm = display_modes[display_mode];
	week_kwh = new Number(totals.week);

	d3.select('#status g.first text.time').text(ts_to_datestring(base_ts, 7*week) + ' - ' + ts_to_datestring(base_ts, 7*week+6));
	d3.select('#status g.second text.time').text('');
	d3.select('#status g.third text.time').text('Projection');

	switch(display_mode) {
	  case 0:
	    d3.select('#status g.first text.value').text(dm.prefix+week_kwh.toFixed(1));
	    d3.select('#status g.second text.value').text('');
	    d3.select('#status g.third text.value').text(dm.prefix+(week_kwh*365/7).toFixed(0));
	    break;
	  case 1:
	    d3.select('#status g.first text.value').text(dm.prefix+(unit_cost*week_kwh).toFixed(2));
	    d3.select('#status g.second text.value').text('');
	    d3.select('#status g.third text.value').text(dm.prefix+(unit_cost*week_kwh*365/7).toFixed(0));
	    break;
	  case 2:
	    d3.select('#status g.first text.value').text(dm.prefix+(unit_co2*week_kwh).toFixed(1));
	    d3.select('#status g.second text.value').text('');
	    d3.select('#status g.third text.value').text(dm.prefix+(unit_co2*week_kwh*365/7).toFixed(0));
	    break;
	}

	d3.select('#status g.first text.units').text(dm.label);
	d3.select('#status g.second text.units').text('');
	d3.select('#status g.third text.units').text(dm.label+'/yr');
}

function ts_to_datestring(ts, day_offset) {
	date = new Date(ts + day_offset * 3600 * 24 * 1000);
	return date.toDateString().slice(4, 10);
}

function calculate_totals(week_data) {
	var totals = {days:[0, 0, 0, 0, 0, 0, 0], week:0};
		for(var d=0; d<7; d++) {
			for(var h=0; h<24; h++)
				totals.days[d]+=week_data[d*24+h];
			totals.week += totals.days[d]
		}
	return totals;
}

function convert_to_ampm(h) {
	if(h=='0' || h=='24')
	  return 'Midnight';
	var suffix = 'am';
	if(h>11) suffix = 'pm';
	if(h>12)
	  return (h-12)+suffix;
	else
	  return h+suffix;
}
text {
   -webkit-touch-callout: none; 
   -webkit-user-select: none; 
   -khtml-user-select: none; 
   -moz-user-select: none; 
   -ms-user-select: none; 
   user-select: none;
   color:white;
}

#main {
  width: 600px; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top:0px; 
  font: 14px Helvetica Neue;
  position:relative;  
  color:white;
}

h1 {
  font-size: 36px; 
  font-weight: 300;  
  color:white;
}

h2 {
  font-size: 24px; 
  font-weight: 300;  
  color:white;
}

#chart path {
  -webkit-transition-property: fill; 
  -webkit-transition-duration: 0.2s;
}

svg text {
  font-family: helvetica, sans-serif; 
}

#status {
  cursor: pointer; 
  text-anchor: middle;
  
}

#status g.first text.time {
  font-size: 13px; 
  font-weight: bold;
  color:white;
  fill: #ffffff;
}

#status g.first text.value {
  font-size: 40px; 
  font-weight: bold;
  color:white;
  fill: #ffffff;
}

#status g.first text.units {
  font-size: 12px;
  color:white;
  fill: #ffffff;
}

#status g.second text.time, #status g.third text.time {
  font-size: 12px;
	color:white;
	fill: #ffffff;
	}

#status g.second text.value, #status g.third text.value {
  font-size: 20px; 
  fill: #ffffff;
  
}

#status g.second text.units, #status g.third text.units {
  font-size: 10px;
  fill: #ffffff;
  }

svg text.day.label {
    font-size: 10px; 
    font-weight: bold; 
    fill: #ffffff; 
    pointer-events: none;
	color:white;
}

svg text.time.label {
  font-size: 12px; 
  font-weight: bold; 
  fill: #ffffff; 
  pointer-events: none;
  color:white;
}

.week_step {
  font-size: 50px; 
  fill: #ffffff; 
  font-weight: bold; 
  font-family: helvetica, sans-serif; 
  cursor: pointer;
  color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
  
    <title>SM consumption heat map</title>
   <meta name="" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">

   
  </head>

  <body style="background-color:black">
  
    
      <div id="main" font color="white">
	  <svg width="600" height="600">
	    <g id="status">
	      <g class="first">
		<text class="time" x="300" y="237"></text>
		<text class="value" x="300" y="276"></text>
		<text class="units" x="300" y="290"></text>
	      </g>
	      <g class="second">
		<text class="time" x="255" y="320"></text>
		<text class="value" x="255" y="347"></text>
		<text class="units" x="255" y="360"></text>
	      </g>
	      <g class="third">
		<text class="time" x="345" y="320">Year</text>
		<text class="value" x="345" y="347"></text>
		<text class="units" x="345" y="360"></text>
	      </g>
	    </g>
	    <text class="week_step" id="downweek" x="60" y="570"><<</text>
	    <text class="week_step" id="upweek" x="510" y="570">>></text>
	  </svg>
      </div>

   

  </body>
</html>

0 个答案:

没有答案
相关问题
最新问题