1
ビューと日付のグラフを作成したいと思います。だから私はangle-nvd3プラグインを使った。グラフが正常に表示されています。私はすべてのdescrete bar要素に同じ色を持っています。私はmoseoverイベントで特定のバーの色を変更する必要があります。私は以下の方法を試みた。descrip barの色を変更する方法onmouseover - angular-nvd3
(1) d3.select(this).atrr('rect').style('fill':'red');
(2) $scope.options.chart[e.index].color = "#222";
しかし、それらのうちは機能していません。これを行う方法はありますか?
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
x: function(d){return d.label;},
y: function(d){return d.value;},
showValues: false,
transitionDuration: 500,
xAxis: {
axisLabel: 'Month'
},
yAxis: {
axisLabel: 'Views',
axisLabelDistance: 10,
tickFormat: function (d) {
return d3.format('k')(d);
}
},
color: ['#59ade8'],
dispatch: {
tooltipShow: function(e){ },
tooltipHide: function(e){},
beforeUpdate: function(e){}
},
discretebar: {
dispatch: {
//chartClick: function(e) {console.log("! chart Click !")},
elementClick: function(e) {
selected_element = e;
setVisibility();
},
elementMouseout: function(e) {},
elementMouseover: function(e) {
d3.select(e).color = '#222'
}
}
}
}
}
$scope.data = [{
values: [{
"label" : "10" ,
"value" : 50
},{
"label" : "11" ,
"value" : 20
},{
"label" : "13" ,
"value" : 60
},{
"label" : "14" ,
"value" : 90
},{
"label" : "15" ,
"value" : 40
},{
"label" : "16" ,
"value" : 50
},{
"label" : "17" ,
"value" : 30
}]
}];
私は決して角度を使用しませんでしたが、純粋なD3コードはこれです: 'd3.select(this)).style( 'fill'、 'red')'。返信いただきありがとうございます。 –
"d3.min.js:1:Uncaught TypeError:未定義の 'setProperty'プロパティを読み取れません" –