在d3.js

时间:2016-04-05 07:41:46

标签: javascript html d3.js

我正在尝试引用我在url的外部json文件,它包含了纪元日期,所以我试图将其转换为可读格式,但不知道我该怎么做。当我试图运行代码时,它给出错误t.slice不是一个函数,但在我有硬编码数据的时候它工作正常但现在我有错误请看看我的代码并提出建议。谢谢。

<script>
        var data;

        d3.json("http://localhost:8080/myfile", function(error, json) {
            if (error) return console.warn(error);
            data = json;

      var myDate = new Date( your epoch date);// How do i mention mine here 
       document.write(myDate.toGMTString()+"<br>"+myDate.toLocaleString());

            var parseDate = d3.time.format("%Y-%m-%d").parse;

            var margin = {
                top: 20,
                right: 0,
                bottom: 80,
                left: 40
            };
            var width = 500 - margin.left - margin.right;
            var height = 300 - margin.top - margin.bottom;

            var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1);
            var yScale = d3.scale.linear().range([height, 0]);
            var hAxis = d3.svg.axis().scale(xScale).orient('bottom').tickFormat(d3.time.format("%Y-%m-%d"));
            var vAxis = d3.svg.axis().scale(yScale).orient('left');
            var tooltip = d3.select('body').append('div')
                .style('position', 'absolute')
                .style('background', '#f4f4f4')
                .style('padding', '5 15px')
                .style('border', '1px #333 solid')
                .style('border-radius', '5px')
                .style('opacity', 'o');

           http://localhost:8080/myfile.forEach(function(d) {
                d.date = parseDate(d.date);
                d.value = +d.value;
            });

            function getDates() {
                return [document.getElementById('field1').value, document.getElementById('field2').value];
            }

            function render(filterByDates) {

                d3.select('svg').remove();

                if (filterByDates) {
                    var date1 = parseDate(document.getElementById('field1').value);
                    var date2 = parseDate(document.getElementById('field2').value);

                    myData = myData.filter(function(d) {
                        return d.date >= date1 && d.date <= date2;
                    });
                }

                xScale.domain(myData.map(function(d) {
                    return d.date;
                }));

                yScale.domain([0, d3.max(myData, function(d) {
                    return d.value;
                })]);

                var svg = d3.select('#chart').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 + ")");

                svg
                    .append('g')
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(hAxis)
                    .selectAll("text")
                    .style("text-anchor", "end")
                    .attr("dx", "-.8em")
                    .attr("dy", "-.55em")
                    .attr("transform", "rotate(-90)");

                svg
                    .append('g')
                    .attr("class", "y axis")
                    // .attr('transform', 'translate(35,' + (height - 25) + ')')
                    .call(vAxis)
 svg
                .selectAll(".bar")
                .data(myData)
                .enter().append("rect")
                .attr("class", "bar")
                .style("fill", "steelblue")
                .attr("x", function(d) {
                    return xScale(d.date);
                })
                .attr("width", xScale.rangeBand())
                .attr("y", function(d) {
                    return yScale(d.value);
                })
                .attr("height", function(d) {
                    return height - yScale(d.value);
                })
                .on('mouseover', function (d) {
                    tooltip.transition()
                            .style('opacity', 1)

                    tooltip.html(d.value)
                            .style('left', (d3.event.pageX) + 'px')
                            .style('top', (d3.event.pagey) + 'px')
                    d3.select(this).style('opacity', 0.5)
                })
                .on('mouseout', function (d) {
                    tooltip.transition()
                            .style('opacity', 0)
                    d3.select(this).style('opacity', 1)
                });
    }

    render(false);
    });

</script>

</body>
<html>

0 个答案:

没有答案