D3.js

<div id="id">
    <p>Apple</p>
    <p id="aa">Pear</p>
    <p>Banana</p>
</div>
<div>
    <p>a</p>
    <p>b</p>
    <p>c</p>
</div>

var div = d3.select(‘#id‘);
var p = div.select("p");
p.style("color","red")

var div = d3.select(‘div‘);
var p = div.selectAll("p");
p.style("color","red")

var str = "China";
var arr = [‘a‘,‘b‘,‘c‘]
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d,i){
      return "第" + i + "个元素绑定的数据是" + d;
})

var dataset = ["I like dog","I like cat","I like snake"];
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset).text(function(d,i){
    return d;
})

var div = d3.select(‘#id‘);
div.append("p").text("append p element");

var div = d3.select(‘#id‘);
div.insert("p","#aa").text("insert p element");

var div = d3.select("#id");
var p = div.select("p")
p.remove();

var width = 300;   // 画布的宽度
var height = 300;  // 画布的高度

var svg = d3.select("body")   // 选择文档中的body元素
    .append("svg")            // 添加一个svg元素
    .attr("width",width)      // 设定宽度
    .attr("height",height)    // 设定高度

var dataset = [250, 210, 170, 130, 90]  // 数据（表示矩形的宽度）

var rectHeight = 25;  // 每个矩形所占的像素高度（包括空白）

//----------------------------------------------------------
svg.selectAll("rect") // 选择svg内所有的矩形
    .data(dataset)    // 绑定数组
    .enter()          // 指定选择集的enter部分
    .append("rect")   // 添加足够数量的矩形元素
//----------------------------------------------------------
// 这段代码要牢记，当有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素
    
    .attr("x",20)
    .attr("y",function(d,i){
        return i * rectHeight;
    })
    .attr("width",function(d,i){
        return d;
    })
    .attr("height",rectHeight-2)

    .attr("fill","#ccc");  // 设置颜色

// 要求:将dataset中最小的值映射成0,最大的值映射成300
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];

var min = d3.min(dataset);
var max = d3.max(dataset);

var linear = d3.scale.linear().domain([min,max]).range([0,300]);

console.log(linear(0.9));  // 返回0
console.log(linear(2.3));  // 返回175
console.log(linear(3.3));  // 返回300

var index = [0, 1, 2, 3, 4];
var color = ["red", "blur", "green", "yellow", "black"];

var ordinal  = d3.scale.ordinal().domain(index).range(color);

console.log(ordinal(0));   // 返回red
console.log(ordinal(2));   // 返回green
console.log(ordinal(4));   // 返回black

var width = 500;   // 画布的宽度
var height = 500;  // 画布的高度

var svg = d3.select("body")   // 选择文档中的body元素
    .append("svg")            // 添加一个svg元素
    .attr("width",width)      // 设定宽度
    .attr("height",height)    // 设定高度

var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];

var linear = d3.scale.linear().domain([0, d3.max(dataset)]).range([0, 200])

var rectHeight = 25;

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d, i){
        return i * rectHeight;
    })
    .attr("width",function(d){
        return linear(d)   // 这里添加比例尺
    })
    .attr("height",rectHeight-2)
    .attr("fill","#ccc")