1
バックボーンビューに複数のD3（再利用可能）チャートを含めるにはどうすればよいですか？バックボーンビューに複数のD3チャートを含めるにはどうすればいいですか？
コードサンプルは、チャート関数（chart（））をバックボーンビュー（_view）でレンダリングする試みです。
例を通じて、あなたはそれを見ることができる：
- 複数のチャートが可能です。
- クラス名はコンソールに表示されますが、グラフ機能では表示されません。
- "chart"クラス名で関数が呼び出されると、（JSONオブジェクトからの）一致量がグラフに表示されます。
チャートの機能を_view.renderに呼び出されると、意図した出力である：
DIVのクラス名、モデルのIDとのdivに表示される各グラフの。ここではテンプレートです：
<div class="b <%= id %>"></div>- チャートクラス名は、HTMLの中に割り当てられた後レンダリングする必要があります。もしそうなら、あなたはどうやって知っていますか？
'className'はD3セレクタの読み込み可能な形式を出力しますか？それはレンダリングされませんので、
_view.render内で呼び出され、チャート機能（チャート（クラス名））がコメントアウトされています。 （はレンダリングで表示するだけです）
これらのチャートのレンダリングに関するアイデアはありますか？私が言うことができるものから、
//chart function
function chart(className){
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 100 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangeRoundBands([0, width], 100);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5, "%");
var svg = d3.select(className).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 + ")");
x.domain("a");
y.domain([0, 1]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.selectAll(".bar")
.data([20])
.enter().append("rect")
.attr("class", "bar")
.attr("x", 10)
.attr("width", 20)
.attr("y", 48)
.attr("height", 100);
}
//multiple charts are possible
chart(".chart");
chart(".chart");
//model
_model = Backbone.Model.extend({
defaults: {
title: null,
body: null
}
});
//collection
_collection = Backbone.Collection.extend({
model: _model,
url: 'http://jsonplaceholder.typicode.com/posts/'
});
//properties of this url include userId, id, title, body
//view
_view = Backbone.View.extend({
tagName: 'div',
className: 'container',
template: _.template($('#template').html()),
render: function() {
var chartClassName = "." + this.model.attributes.id;
this.$el.html(this.template(this.model.attributes));
$('.b').html("Chart goes here");
//logs chart class name
console.log(chartClassName);
//chart(chartClassName);
return this;
}
});
//view
_View = Backbone.View.extend({
el: '.a',
initialize: function() {
this.collection = new _collection();
this.collection.fetch({
reset: true
});
this.render();
this.listenTo(this.collection, 'reset', this.render);
},
render: function() {
this.collection.each(function(item) {
this.renderA(item);
}, this);
},
renderA: function(item) {
var __View = new _view({
model: item
});
this.$el.append(__View.render().el);
}
});
new _View();<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Adding a D3 chart to a Backbone template</title>
<style>
.bar {
fill: green;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
</head>
<body>
<div class="chart"></div>
<div class="a"></div>
<script type="text/template" id="template">
<div class="b <%= id %>"></div>
<p>Title: <%= title %></p>
<p>Body: <%= body %></p>
</script>
</body>
</html>