Fatal编程技术网
  • javascript/
  • Javascript 使用条形图可视化数据

Javascript 使用条形图可视化数据

javascript d3.js

Javascript 使用条形图可视化数据,javascript,d3.js,Javascript,D3.js,我的条形图是这样的 我想这样配置xAxis（底部年份）。 我将获得重复的年份。如何删除重复的年份 这是我的密码 <!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000

我的条形图是这样的

我想这样配置xAxis（底部年份）。 我将获得重复的年份。如何删除重复的年份

这是我的密码

    <!DOCTYPE html>
<meta charset="utf-8">
<style>

    body {
        font: 10px sans-serif;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .bar {
        fill: orange;
    }

    .bar:hover {
        fill: orangered ;
    }

    .x.axis path {
        display: none;
    }

    .d3-tip {
        line-height: 1;
        font-weight: bold;
        padding: 12px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 2px;
    }

    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
        box-sizing: border-box;
        display: inline;
        font-size: 10px;
        width: 100%;
        line-height: 1;
        color: rgba(0, 0, 0, 0.8);
        content: "\25BC";
        position: absolute;
        text-align: center;
    }

    /* Style northward tooltips differently */
    .d3-tip.n:after {
        margin: -1px 0 0 0;
        top: 100%;
        left: 0;
    }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>

    var margin = {top: 40, right: 20, bottom: 30, left: 40},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var formatPercent = d3.format("0");

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    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")
        .tickFormat(formatPercent);

    var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
            return "<strong>Frequency:</strong> <span style='color:red'>" + d[1] + "</span>";
        })

    var svg = d3.select("body").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.call(tip);

    var jonData = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';
    d3.json(jonData, function(error, data) {
        if(error){
            return console.warn(error);
        }
//        console.log(data.data);

        data = data.data;
        data.map(function(d)
        {
            var date = new Date(d[0]);

            console.log(date.getFullYear());
        });
        x.domain(data.map(function(d) { return d[0]; }));
        y.domain([0, d3.max(data, function(d) { return d[1]; })]);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Gross Domestic Product, USA");

        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return x(d[0]); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) { return y(d[1]); })
            .attr("height", function(d) { return height - y(d[1]); })
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide)

    });

</script>


身体{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.酒吧{
填充物：橙色；
}
.bar:悬停{
填充：橙色；
}
.x轴路径{
显示：无；
}
.d3提示{
线高：1；
字体大小：粗体；
填充：12px；
背景：rgba（0,0,0,0.8）；
颜色：#fff；
边界半径：2px；
}
/*为工具提示创建一个小三角形延长线*/
.d3提示：之后{
框大小：边框框；
显示：内联；
字体大小：10px；
宽度：100%；
线高：1；
颜色：rgba（0,0,0,0.8）；
内容：“\25BC”；
位置：绝对位置；
文本对齐：居中；
}
/*以不同方式设置向北工具提示的样式*/
第三点提示n：之后{
保证金：-1px0；
最高：100%；
左：0；
}
var margin={顶部：40，右侧：20，底部：30，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var formatPercent=d3.格式（“0”）；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.格式（格式百分比）；
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html（函数（d）{
返回“频率：”+d[1]+”；
})
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.call（tip）；
var Jondahttps://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';
d3.json（数据，函数（错误，数据）{
如果（错误）{
返回控制台。警告（错误）；
}
//console.log（data.data）；
data=data.data；
数据映射（函数（d）
{
var日期=新日期（d[0]）；
log（date.getFullYear（））；
});
x、 域（data.map（函数（d）{返回d[0]；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d[1]；}）]；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.text（“美国国内生产总值”）；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{返回x（d[0]）；}）
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{返回y（d[1]）；}）
.attr（“height”，函数（d）{返回高度-y（d[1]）；}）
.on（'mouseover'，tip.show）
.on（'mouseout'，tip.hide）
});
我正在关注这个链接。我做错了什么

谢谢

代码的主要问题是使用的是顺序刻度。您可以使用顺序刻度（如您所见，条形图正在显示），但您必须创建一个特殊代码来消除刻度

“正确”的方法是使用时间刻度，因为您的数据与时间相关：

var x = d3.time.scale()
    .range([0, width]);
但是，您必须解析日期：

var timeFormat = d3.time.format("%Y-%m-%d")

data.forEach(function(d) {
    d[0] = timeFormat.parse(d[0]);
});
并更改x域：

x.domain(d3.extent(data, function(d) {
    return d[0]
}));
以下是使用轴生成器中的
ticks（10）
更改的代码：

var保证金={
前40名，
右:20,，
底数：30，
左：40
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var formatPercent=d3.格式（“0”）；
var x=d3.time.scale（）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.蜱（15）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.格式（格式百分比）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var timeFormat=d3.time.format（“%Y-%m-%d”）
var Jondahttps://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';
d3.json（数据，函数（错误，数据）{
如果（错误）{
返回控制台。警告（错误）；
}
data=data.data；
data.forEach（函数（d）{
d[0]=timeFormat.parse（d[0]）；
});
x、 域（d3）。范围（数据，函数（d）{
返回d[0]
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d[1]；
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.text（“美国国内生产总值”）；
svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d[0]）；
})
.attr（“宽度”，宽度/数据长度）
.attr（“y”，函数（d）{
返回y（d[1]）；
})
.attr（“高度”，函数