SVG font too bold

[Sergiy Nesterko]

Hi everyone,

I am new to d3, just discovered it and am extremely excited about what
it can do. To get a hang of it, I went through the tutorial on d3
website (here's the link: http://mbostock.github.com/d3/tutorial/bar-1.html).
I got it to display almost the way it is on the tutorial, with the
annoying exception of font boldness. Here is the link to my version:

http://theory.info/vis/d3/constropt/

It is weird that I couldn't find the reason why the fonts in tutorial
and my implementation are different. I went through the CSS of the
tutorial webpage and tried out several things, but to no luck.

Please help me tackle this small yet important problem. Thank you so
much.

Sergiy

[Kai Chang]

Looks like it has to do with the stroke-width on the text. Add this line of css and you'll see white numbers look correct

text { stroke-width: 0px; }

The black numbers disappear, because their fill is currently set to white.

Maybe don't set the stroke color for text at all? I believe it should default to transparent.

[Jason Davies]

Yeah, the issue is setting "stroke" for the parent chart element:

// styling
chart.attr("stroke", "white")

If you remove that, and the other "stroke" attribute further down:

.attr("stroke", "black")

That should fix it. Text typically only needs a fill style.

Side note: it's normally better to use .style() for styling, as it takes
priority over stylesheets. If you use .attr(), a stylesheet can
potentially override it.

--
Jason Davies, http://www.jasondavies.com/

[Sergiy Nesterko]

Hi Kai,

Thanks for the response, it works. I fixed both fonts, now the example
is looking exactly like the tutorial one (see link in my first post if
curious).

For your question, I think the reason for having to manipulate the
stroke attributes for text is that fill and stroke colours are set in
parent object (chart), and so it could be that stroke width is set to
1 at that point. This means that all child elements would inherit that
unless it is changed explicitly. Or not, this is just my take. In the
tutorial code though, stroke-width is not manipulated at all, this may
suggest that my reasoning is incorrect.

Either way, thank you so much. I am very excited to have discovered
d3. It looks to be a great solution for browser based data driven
vector graphics.

Have a good one.

Sergiy

On Jul 28, 5:26 pm, Kai Chang <kai.s.ch...@gmail.com> wrote:
> Looks like it has to do with the stroke-width on the text. Add this line of
> css and you'll see white numbers look correct
>
> text { stroke-width: 0px; }
>
> The black numbers disappear, because their fill is currently set to white.
>
> Maybe don't set the stroke color for text at all? I believe it should
> default to transparent.
>
> On Thu, Jul 28, 2011 at 2:05 PM, Sergiy Nesterko

> <serge.neste...@gmail.com>wrote:

[Sergiy Nesterko]

Hi Jason,

Thank you for the note on using .style(), but what about this:

chart.selectAll("rect")
.data(data)
.enter().append("svg:rect")
.attr("y", function(d, i) { return i * 20; })
.attr("width", x)
.attr("height", 20);

This is taken directly from the tutorial mentioned in the first post.
width and height are style elements for svg graphic, yet they are set
using attr call. Please help me understand what you mean. Maybe, only
appearance attributes, like stroke width, fill and stroke colour, font
family etc? Thanks.

Sergiy

On Jul 28, 5:32 pm, Jason Davies <ja...@jasondavies.com> wrote:
> Yeah, the issue is setting "stroke" for the parent chart element:
>
>     // styling
>     chart.attr("stroke", "white")
>
> If you remove that, and the other "stroke" attribute further down:
>
>     .attr("stroke", "black")
>
> That should fix it.  Text typically only needs a fill style.
>
> Side note: it's normally better to use .style() for styling, as it takes
> priority over stylesheets.  If you use .attr(), a stylesheet can
> potentially override it.
>
> --

> Jason Davies,http://www.jasondavies.com/

>
>
>
>
>
>
>
> On Thu, Jul 28, 2011 at 02:26:17PM -0700, Kai Chang wrote:
> > Looks like it has to do with the stroke-width on the text. Add this line of
> > css and you'll see white numbers look correct
>
> > text { stroke-width: 0px; }
>
> > The black numbers disappear, because their fill is currently set to white.
>
> > Maybe don't set the stroke color for text at all? I believe it should
> > default to transparent.
>
> > On Thu, Jul 28, 2011 at 2:05 PM, Sergiy Nesterko

> > <serge.neste...@gmail.com>wrote:

[Jason Davies]

On Thu, Jul 28, 2011 at 02:49:56PM -0700, Sergiy Nesterko wrote:
> Thank you for the note on using .style(), but what about this:
>
> chart.selectAll("rect")
> .data(data)
> .enter().append("svg:rect")
> .attr("y", function(d, i) { return i * 20; })
> .attr("width", x)
> .attr("height", 20);
>
> This is taken directly from the tutorial mentioned in the first post.
> width and height are style elements for svg graphic, yet they are set
> using attr call. Please help me understand what you mean. Maybe, only
> appearance attributes, like stroke width, fill and stroke colour, font
> family etc? Thanks.

Right, "width" and "height" used in this way are not equivalent to the
CSS properties of the same name, they're "proper" attributes for the
<svg> element. SVG and CSS share many properties, but width and height
are not among them, see: http://www.w3.org/TR/SVG/styling.html

This advice only applies to the shared properties, which are indeed
mainly appearance attributes. It's good practice because you may end up
using a stylesheet and could waste a lot of time trying to work out why
your .attr() calls have stopped working!