我有一個內置d3的圖表來顯示誰在說話以及在播放過程中的位置。字符由顏色條表示,我想提供一個圖例。但是,我的圖例代碼垂直顯示在單個列中,並多次顯示相同的字符名稱。我知道後者是因爲它解析了json中的每條記錄,但我不知道如何僅提供每個字符一次,而不是像提供我的代碼中的位置列表一樣提供字符列表。有沒有辦法,我可以從json做到這一點呢?d3圖表中的兩個傳奇問題
另外,如何組織圖例中的圖例以利用圖表左上部分的空白?我用我目前在https://jsfiddle.net/3f7xrgeb/上的代碼創建了一個小提琴,並且在下面粘貼了它。我的工作副本(如果小提琴不顯示)在http://www.matthewedavis.net/Magdalene_playtext/test_bars.html。
任何幫助,將不勝感激。
var margin = {top: 50, right: 150, bottom: 50, left: 150},
w = 2500 - margin.left - margin.right,
h = 500 - margin.top - margin.bottom;
d3.json("http://www.matthewedavis.net/Magdalene_playtext/test_chart.json", function(json) {
var data = json.items;
var test = function(d) { return d.starting_line + d.duration; };
var stage_directions = ([44, 49, 114, 140, 209, 217, 249, 257, 265, 277, 305, 334, 358, 381, 398, 409, 440, 470, 491, 547, 555, 564, 572, 587, 614, 630, 640, 691, 704, 725, 743, 775, 793, 818, 823, 841, 845, 868, 872, 888, 902, 910, 920, 925, 963, 993, 1005, 1023, 1031, 1047, 1061, 1096, 1125, 1133, 1143, 1178, 1210, 1228, 1281, 1293, 1336, 1349, 1376, 1395, 1439, 1446, 1454, 1538, 1554, 1562, 1578, 1598, 1610, 1618, 1642, 1646, 1716, 1725, 1743, 1781, 1791, 1797, 1843, 1863, 1887, 1915, 1923, 1939 ,1972, 1989, 2019, 2031, 2039, 2045, 2073, 2085, 2101, 2123])
var x = d3.scale.linear()
.domain([0, 2200])
.range([0, w]);
var y = d3.scale.ordinal()
.domain(["The priest's cell","The Cloud","Wilderness","The mountain","The Lodge","Marseilles","The Ship","Heaven","Heathen Temple","Sepulchre","The Stations","Palace of the King of Marseilles","Lazarus' tomb","Simon the Leper's House","Arbor","Jherusalem","Tavern","Hellmouth","The Place","Stage Above Hell","King of Flesh's location","King of the World's location","Pilate's location","Herod's location","Magdalene Castle","Tiberius' Palace"])
.rangeBands([0, h]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var svg = d3.select("body").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("text")
.attr("transform", "translate(" + (w/2) + " ," + (h + margin.bottom - 5) +")")
.style("text-anchor", "middle")
.text("Line Number");
var t;
for (t in stage_directions){
svg.append("rect")
.attr("class", "overlay")
.attr("x",stage_directions[t])
.attr("width", 1)
.attr("height", h)
.style ("fill", "black")
.style ("opacity", 0.3);
}
svg.append("rect")
.attr("class", "overlay")
.attr("x",1)
.attr("width", 1133)
.attr("height", h)
.style ("fill", "red")
.style ("opacity", 0.1);
svg.append("rect")
.attr("class", "overlay")
.attr("x",1133)
.attr("width", 857)
.attr("height", h)
.style ("fill", "yellow")
.style ("opacity", 0.1);
svg.append("rect")
.attr("class", "overlay")
.attr("x",1990)
.attr("width", 134)
.attr("height", h)
.style ("fill", "green")
.style ("opacity", 0.1);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
var bars = svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", function(d, i) {return "bar " + d.character;})
.attr("x", function(d, i) {return d.starting_line;})
.attr("y", function(d, i) {return y(d.location);})
.attr("width", function(d, i) {return d.duration;})
.attr("height", 15)
.style("fill", function(d,i) {return "#" + d.color;});
var legend = svg.selectAll(".legend")
.data(data)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", 10)
.attr("width", 10)
.attr("height", 10)
.style("fill", function(d,i) {return "#" + d.color;});
legend.append("text")
.attr("x", 22)
.attr("y", 5)
.attr("dy", ".35em")
.text(function(d) { return d.character; });
svg.append("g")
.attr("class", "legend")
.call(legend)
});
不幸的是CSS不會爲此工作,因爲我需要重複使用其他數據集的代碼,並且不能每次都寫自定義CSS。我找到了一個解決方案,但: 最終這將用於其他數據集,因此爲每個集合生成自定義css可能是一個問題。不過,我找到了一個解決方案,我將作爲另一條評論發佈。 – medievalmatt
'\t \t \t var listCharacters = d3.set(data.map(function(d){return d.character}))。values(); listColors = []; (listCharacters [1] === data [key] .character){ if(listColors.indexOf(data [key] .color){ for(in listCharacters){ for(var key in data){ if > -1) {} 其他 { listColors.push(數據[關鍵]。顏色) }} 其他 {}} } ' – medievalmatt
很好的瞭解,你發現顏色的解決方案。另外,如果我的答案以某種方式幫助了你,那麼承認它是一個好習慣。 –