我想将来自<html>
<head>
<meta charset="utf-8">
<title>Indicators</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> -->
<style>
body {
font: 10px sans-serif;
}
select {
display: block;
}
.bar {
fill: blue;
opacity: 0.8;
}
.axis path,.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<div id='vis-container' align="right"></div>
<script type="text/javascript">
// Load and munge data,then make the visualization.
var fileName = "./indicators.csv";
var countries = ["Austria","Canada","Chile","France","Italy","Poland","Spain","Sweden","USA"];
d3.csv(fileName,function(error,data) {
var indicatorsMap = {};
data.forEach(function(d) {
var indicator = d.indicator;
indicatorsMap[indicator] = [];
// { indicatorName: [ bar1Val,bar2Val,... ] }
countries.forEach(function(field) {
indicatorsMap[indicator].push( +d[field] );
});
});
makeVis(indicatorsMap);
});
var makeVis = function(indicatorsMap) {
// Define dimensions of vis
var margin = { top: 30,right: 50,bottom: 30,left: 50 },width = 550 - margin.left - margin.right,height = 250 - margin.top - margin.bottom;
// Make x scale
var xScale = d3.scale.ordinal()
.domain(countries)
.rangeRoundBands([0,width],0.1);
// Make y scale,the domain will be defined on bar update
var yScale = d3.scale.linear()
.range([height,0]);
// Create canvas
var canvas = d3.select("#vis-container")
.append("svg")
.attr("width",width + margin.left + margin.right)
.attr("height",height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
// Make x-axis and add to canvas
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
canvas.append("g")
.attr("class","x axis")
.attr("transform","translate(0," + height + ")")
.call(xAxis);
// Make y-axis and add to canvas
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var yAxisHandleForupdate = canvas.append("g")
.attr("class","y axis")
.call(yAxis);
yAxisHandleForupdate.append("text")
.attr("transform","rotate(-90)")
.attr("y",6)
.attr("dy",".71em")
.style("text-anchor","end")
.text("Value");
var updateBars = function(data) {
// First update the y-axis domain to match data
yScale.domain( d3.extent(data) );
yAxisHandleForupdate.call(yAxis);
var bars = canvas.selectAll(".bar").data(data);
// Add bars for new data
bars.enter()
.append("rect")
.attr("class","bar")
.attr("x",function(d,i) { return xScale( countries[i] ); })
.attr("width",xScale.rangeBand())
.attr("y",i) { return yScale(d); })
.attr("height",i) { return height - yScale(d); });
// Update old ones,already have x / width from before
bars
.transition().duration(250)
.attr("y",i) { return height - yScale(d); });
// Remove old ones
bars.exit().remove();
};
// Handler for dropdown value change
var dropdownChange = function() {
var newIndicator = d3.select(this).property('value'),newData = indicatorsMap[newIndicator];
updateBars(newData);
};
// Get names of indicators,for dropdown
var indicators = Object.keys(indicatorsMap).sort();
var dropdown = d3.select("#vis-container")
.insert("select","svg")
.on("change",dropdownChange);
dropdown.selectAll("option")
.data(indicators)
.enter().append("option")
.attr("value",function (d) { return d; })
.text(function (d) {
return d[0].toUpperCase() + d.slice(1,d.length); // capitalize 1st letter
});
var initialData = indicatorsMap[ indicators[0] ];
updateBars(initialData);
};
</script>
</body>
</html>
组件的age输入的数据发送到包含垂直线的child-information组件。该行在达到年龄后向左age-line移动。
我的代码有什么问题？没有错误消息。
Child-inf.html：
'age * 100 pixels'儿童信息：
<button id="okButton" (click)=addAge()>OK</button>
Age : <input
type="text" name="Age" value="Kor" id="ageId" onfocus="this.value =
this.value=='Kor'?'':this.value;" onblur="this.value =
this.value==''?'Kor':this.value;">
年龄行html：
export class ChildInformationsComponent implements OnInit {
age:number = 1;
@Output() buttonClicked: EventEmitter<number> = new EventEmitter<number>();
constructor(private el: ElementRef) { }
ngOnInit() { }
addAge(){
this.age =parseInt((<HTMLInputElement>document.getElementById('ageId')).value);
this.buttonClicked.emit(this.age);
}
}
第ts行：
<div class="age-line" [style.left.px]="age * 100"> <div class="line"></div> </div>