代码之家  ›  专栏  ›  技术社区  ›  Maihan Nijat

如何限制在D3.js中显示的记号数?

d3.js javascript
  •  0
  • Maihan Nijat  · 技术社区  · 7 年前

    http://jsfiddle.net/aWJtJ/8/ ,但它使用的是D3.js版本3。我将代码转换为版本5,但没有得到相同的结果。它只显示两个条。全小提琴: http://jsfiddle.net/pmLf095y/ 

    // Margins, width and height.
var margin = {top: 20, right: 20, bottom: 30, left: 10},
    body_width = 500,
    width = body_width - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

// Scales.
var x = d3.scaleTime().range([width/data.length/2, width-width/data.length/2]);
var y = d3.scaleLinear().range([height, 0]);

// Construct our SVG object.
var svg = d3.select(".system-efficiency").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-axis.
var xAxis = d3.axisBottom(x)
    .ticks(d3.timeMonth.every(1))
    .tickFormat(d3.timeFormat('%b %Y'));
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Set scale domains.
x.domain(data.map(d => new Date(d.datestr)));
y.domain([0, d3.max(data, function(d) { return d.air_used; })]);

// Call x-axis.
d3.select(".x.axis")
    .transition().duration(1000)
    .call(xAxis);

// Draw bars.
var bars = svg.selectAll(".air_used")
    .data(data, function(d) { return d.datestr; });

bars.exit().remove();

bars.transition().duration(1000)
    .attr("x", function(d) { return x(d.date) - width/data.length/2; })
    .attr("width", width / data.length)
    .attr("y", function(d) { return y(d.air_used); })
    .attr("height", function(d) { return height - y(d.air_used);});

bars.enter().append("rect")
    .attr("class", "air_used")
    .attr("width", width / data.length)
    .attr("x", function(d) { return x(new Date(d.datestr)) - (width/data.length)/2; })
    .attr("y", height)
    .attr("height", 0)
    .transition().duration(1000)
    .attr("y", function(d) { return y(d.air_used); })
    .attr("height", function(d) { return height - y(d.air_used);});
    2 回复  |  直到 7 年前
        1
  •  1
  •   Shashank    7 年前

    x 域,您不需要映射日期,而是要找到日期的范围。 

    x.domain(d3.extent(data, (d => new Date(d.datestr))));

    更改代码: 

    var data = [
    {
        "air_produced": 0.660985,
        "air_used": 0.342706,
        "datestr": "2012-12-01 00:00:00",
        "energy_used": 0.106402
    },
    {
        "air_produced": 0.824746,
        "air_used": 0.400776,
        "datestr": "2013-01-01 00:00:00",
        "energy_used": 0.250462
    },
    {
        "air_produced": 0.181898,
        "air_used": 0.003541,
        "datestr": "2013-02-01 00:00:00",
        "energy_used": 0.000582
    },
    {
        "air_produced": 1.096685,
        "air_used": 0.97719,
        "datestr": "2013-03-01 00:00:00",
        "energy_used": 0.923212
    },
    {
        "air_produced": 0.283379,
        "air_used": 0.241088,
        "datestr": "2013-04-01 00:00:00",
        "energy_used": 0.23381
    }
];

// Margins, width and height.
var margin = {top: 20, right: 20, bottom: 30, left: 10},
    body_width = 500,
    width = body_width - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

// Scales.
var x = d3.scaleTime().range([width/data.length/2, width-width/data.length/2]);
var y = d3.scaleLinear().range([height, 0]);

// Construct our SVG object.
var svg = d3.select(".system-efficiency").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-axis.
var xAxis = d3.axisBottom(x)
    .ticks(d3.timeMonth.every(1))
    .tickFormat(d3.timeFormat('%b %Y'));

// Set scale domains.
x.domain(d3.extent(data, (d => new Date(d.datestr))));
y.domain([0, d3.max(data, function(d) { return d.air_used; })]);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")");
    
// Call x-axis.
d3.select(".x.axis")
    .transition().duration(1000)
    .call(xAxis);

// Draw bars.
var bars = svg.selectAll(".air_used")
    .data(data, function(d) { return d.datestr; });

bars.exit().remove();

bars.transition().duration(1000)
    .attr("x", function(d) { return x(d.date) - width/data.length/2; })
    .attr("width", width / data.length)
    .attr("y", function(d) { return y(d.air_used); })
    .attr("height", function(d) { return height - y(d.air_used);});

bars.enter().append("rect")
    .attr("class", "air_used")
    .attr("width", width / data.length)
    .attr("x", function(d) { return x(new Date(d.datestr)) - (width/data.length)/2; })
    .attr("y", height)
    .attr("height", 0)
    .transition().duration(1000)
    .attr("y", function(d) { return y(d.air_used); })
    .attr("height", function(d) { return height - y(d.air_used);});
    .axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.air_used {
  fill: steelblue;
}

.x.axis path {
  display: none;
}
    <script src="https://d3js.org/d3.v4.min.js"></script>
<div class="section system-efficiency">
    <h4>SYSTEM EFFICIENCY</h4>
</div>

    希望一切都会好起来。

        2
  •  0
  •   Maihan Nijat    7 年前

    下一行只返回一个值 [0] 但我需要定义范围 [0, ?] : 

    x.domain(data.map(d => new Date(d.datestr)));


    x.domain(d3.extent(data, function(d) { return d.date; }));

    完整代码: 

    // Margins, width and height.
var margin = {top: 20, right: 20, bottom: 30, left: 10},
    body_width = 600,
    width = body_width - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

// Scales.
var x = d3.scaleTime().range([width / data.length / 2, width - width / data.length / 2]);
var y = d3.scaleLinear().range([height, 0]);

// Construct our SVG object.
var svg = d3.select(".system-efficiency").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-axis.
var xAxis = d3.axisBottom(x)
    .ticks(d3.timeMonth.every(1))
    .tickFormat(d3.timeFormat('%b %Y'));
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Date parsing.
const parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");
data.forEach(function(d) {
    d.date = parseDate(d.datestr);
});

console.log(data);

// Set scale domains.
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function (d) {
    return d.air_used;
})]);

// Call x-axis.
d3.select(".x.axis")
    .transition().duration(1000)
    .call(xAxis);

// Draw bars.
var bars = svg.selectAll(".air_used")
    .data(data, function (d) {
        return d.datestr;
    });

bars.exit().remove();

bars.transition().duration(1000)
    .attr("x", function (d) {
        return x(d.date) - width / data.length / 2;
    })
    .attr("width", width / data.length)
    .attr("y", function (d) {
        return y(d.air_used);
    })
    .attr("height", function (d) {
        return height - y(d.air_used);
    });

bars.enter().append("rect")
    .attr("class", "air_used")
    .attr("width", width / data.length)
    .attr("x", function (d) {
        return x(d.date) - (width / data.length) / 2;
    })
    .attr("y", height)
    .attr("height", 0)
    .transition().duration(1000)
    .attr("y", function (d) {
        return y(d.air_used);
    })
    .attr("height", function (d) {
        return height - y(d.air_used);
    });

    注意:我从一个stackoverflow问题中获取了v3示例,但现在找不到它作为参考。

    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    1 年前
    Niobos  ·  如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?
    1 年前
    Alex  ·  在轻量级中同时解构和不解构变量
    1 年前
    Ângelo Rigo  ·  ReactJS映射:如何迭代[关闭]
    1 年前
    bairog  ·  从按属性筛选的对象数组字典中创建值数组
    1 年前
    KaiMcKiernan  ·  基于Math.random()的函数在另一个函数内不起作用[关闭]
    1 年前
    David Jeong  ·  浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    user3472810  ·  Angular@Output/EventEmitter返回undefined
    1 年前
    lokiuucx  ·  JS对象属性返回未定义,尽管对象属性应该有值
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号