D3テキストまたは凡例を使用してデータセットを表示する方法

凡例またはテキストまたはデータをグラフに表示したい。グラフを表示することはできますが、テキストのように "lab"と "labno"の値を表示する方法はわかりません。私は伝説をどこに置くべきかわかりません。私はそれを私のチャート機能の中に表示したい。私はこの
D3テキストまたは凡例を使用してデータセットを表示する方法

Xのようなものを表示したい

は30
yは
zはここ

真である真です私のコードは

ある

var data = 
[ 
    {algo:"a ", accuracy: 50, lab:"x ", labno: 30 }, 
    {algo:"b", accuracy: 96.29, lab:"y", labno:"True" }, 
    {algo:"c", accuracy: 95, lab:"z", labno: "True" } 
    ]; 


function drawBarcharts(data) { 
var margin = {top:10, right:10, bottom:90, left:50}; 
var width = 960 - margin.left - margin.right; 
    var height = 500 - margin.top - margin.bottom; 
    var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .03) 
    var yScale = d3.scale.linear().range([height, 0]) 
    var xScale2 = d3.scale.linear(); 

var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left"); 


var svgContainer = d3.select("#chartID").append("svg") 
    .attr("width", width+margin.left + margin.right) 
    .attr("height",height+margin.top + margin.bottom) 
    .append("g").attr("class", "container") 
    .attr("transform", "translate("+ margin.left +","+ margin.top +")"); 

xScale.domain(data.map(function(d) { return d.algo; })); 
yScale.domain([0, d3.max(data, function(d) { return d.accuracy })]); 



var xAxis_g = svgContainer.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + (height) + ")") 
    .call(xAxis) 
    .selectAll("text"); 


    var yAxis_g = svgContainer.append("g") 

    .append("text") 
    .text("abc"); 

    svgContainer.selectAll(".bar") 
     .data(data) 
     .enter() 
    .append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return xScale(d.algo); }) 
    .attr("width", xScale.rangeBand()) 
    .attr("y", function(d) { return yScale(d.accuracy); }) 

    .attr("height", function(d) { return height - yScale(d.accuracy); }) 

    svgContainer.selectAll(".text")  
    .data(data) 
    .enter() 
    .append("text") 
    .attr("class","label") 
    .attr("x", (function(d) { return xScale(d.algo) + xScale.rangeBand()/2 ; }  )) 
    .attr("y", function(d) { return yScale(d.accuracy) +10; }) 

    .attr("dy", ".75em") 
    .text(function(d) { return d.accuracy; }) 

}

出典

2017-12-11 pepo1

-1

ここ行く。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>D3 Test</title> 
 
    <script src="https://d3js.org/d3.v3.min.js"></script> 
 
    </script> 
 
\t <style> 
 
\t body { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    position: relative; 
 
} 
 

 
svg { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: center; 
 
} 
 

 
text{ 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
\t font-size:12px; 
 
} 
 

 
.axis text { 
 
    font: 10px sans-serif; 
 
} 
 

 
.axis path{ 
 
    fill: none; 
 
    stroke: #000; 
 
} 
 

 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 

 
.axis .tick line { 
 
    stroke-width: 1; 
 
    stroke: rgba(0, 0, 0, 0.2); 
 
} 
 

 
.axisHorizontal path{ 
 
    fill: none; 
 
} 
 

 
.axisHorizontal line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 

 
.axisHorizontal .tick line { 
 
    stroke-width: 1; 
 
    stroke: rgba(0, 0, 0, 0.2); 
 
} 
 

 
.bar { 
 
    fill: steelblue; 
 
    fill-opacity: .9; 
 
} 
 

 

 
\t </style> 
 

 
</head> 
 
<body> 
 
<div id="chartID"></div> 
 
    <script type="text/javascript"> 
 

 
var data = 
 
[ 
 
    {algo:"a ", accuracy: 50, lab:"x ", labno: 30 }, 
 
    {algo:"b", accuracy: 96.29, lab:"y", labno:"True" }, 
 
    {algo:"c", accuracy: 95, lab:"z", labno: "True" } 
 
    ]; 
 

 

 
var drawBarcharts = function() { 
 

 

 
    
 
var margin = {top:10, right:10, bottom:90, left:50}; 
 
var width = 450 - margin.left - margin.right; 
 
    var height = 300 - margin.top - margin.bottom; 
 
    var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .03) 
 
    var yScale = d3.scale.linear().range([height, 0]) 
 
    var xScale2 = d3.scale.linear(); 
 

 
var xAxis = d3.svg.axis() 
 
    .scale(xScale) 
 
    .orient("bottom"); 
 

 
var yAxis = d3.svg.axis() 
 
    .scale(yScale) 
 
    .orient("left"); 
 

 

 
var svgContainer = d3.select("#chartID").append("svg") 
 
    .attr("width", width+margin.left + margin.right) 
 
    .attr("height",height+margin.top + margin.bottom) 
 
    .append("g").attr("class", "container") 
 
    .attr("transform", "translate("+ margin.left +","+ margin.top +")"); 
 

 
xScale.domain(data.map(function(d) { return d.algo; })); 
 
yScale.domain([0, d3.max(data, function(d) { return d.accuracy })]); 
 

 

 

 
var xAxis_g = svgContainer.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + (height) + ")") 
 
    .call(xAxis) 
 
    .selectAll("text"); 
 

 

 
    //var yAxis_g = svgContainer.append("g") 
 
    //.append("text") 
 
    //.text("abc"); 
 

 
    svgContainer.selectAll(".bar") 
 
     .data(data) 
 
     .enter() 
 
    .append("rect") 
 
    .attr("class", "bar") 
 
    .attr("x", function(d) { return xScale(d.algo); }) 
 
    .attr("width", xScale.rangeBand()) 
 
    
 
    .attr("y", function(d) { return yScale(d.accuracy); }) 
 

 
    .attr("height", function(d) { return height - yScale(d.accuracy); }) 
 

 
    svgContainer.selectAll(".text")  
 
    .data(data) 
 
    .enter() 
 
    .append("text") 
 
    .attr("class","label") 
 
    .attr("x", (function(d) { return xScale(d.algo) + xScale.rangeBand()/2 ; }  )) 
 
    .attr("y", function(d) { return yScale(d.accuracy) +10; }) 
 

 
    .attr("dy", ".75em") 
 
    .text(function(d) { return d.labno; }) 
 

 
    
 
    var legend = svgContainer.selectAll(".legend") 
 
    .data(data) 
 
    .enter().append("g") 
 
    .attr("class", "legend") 
 
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 
 

 

 
legend.append("text") 
 
    .attr("x", 10) 
 
    .attr("y", 9) 
 
    .attr("dy", ".35em") 
 
    .style("text-anchor", "start") 
 
    .text(function(d) { return d.lab + ' is ' + d.labno; }); 
 
\t 
 
}(data); 
 

 
    </script> 
 

 
</body> 
 
</html>

出典

2017-12-11 06:23:34 Jack7

私はなぜdownvote知っていることはできますか？質問が間違っていたのですか？私はpepoが彼がチャートで使っていない内容の凡例を表示したいと思っていました。 – Jack7

D3テキストまたは凡例を使用してデータセットを表示する方法

答えて

関連する問題